2011-07-29 6 views
0

私は初心者です。本当に助けが必要です ここにこの関数を書きました。 目的は、使用量がjavacriptを使ったナビゲーション

navigation("#home",".content","home.php"); 
    navigation("#about",".content","about.php"); 
    navigation("#store",".content","right.php"); 
簡単です

function navigation($nav,$container,$link) 
{ 


$($nav).click(function(){ 
    $($container).slideUp(500,function(e){ 
    $(this).append("<span>"); 
    $(this).load($link); 
    }); 
    }); 
    { 
    $($container).ajaxComplete(function(){ 
    $(this).slideDown(500); 
}); 
    } 
    { 
    $($container).slideUp(500); 
    } 
} 

、要素名、divタグセレクタとPHPファイルのアドレスをパラメータとして取るようにしたHTMLは、わずか数<div>一つです

class=".content"タグと<a>と呼ばれるリンクは#home #about #storeと呼ばれ、phpのページはそれらの内部の単純なhtmlです。


今の問題は、私はそれが動作するリンクをクリックしたときですが、私はそれが アクティブになり、私がロードしようと同じ機能を持つサブリストを行うことを約あった後、彼はアクティブリンクunclickableようにする方法を見つけることができますリンクを含むナビゲーションリンクの下に小さなdivが表示されますが、私はできません方法を見つける プロのいずれかの任意のアイデアを持っている???

答えて

1

を使用することによって達成することができるか、ここで見ることができますかなり書き直す。

まず、すべてのナビゲーション項目にクラスを指定します。 navアイテムの内部では(divliの要素なのかどうかわかりません)<a>タグを、ナビゲーションをロードするページに設定したsrcに設定します。完了すると、次のようになります。

<ul id="navigation"> 
    <li class="nav"> 
     <a src="home.php">HOME</a> 
    </li> 
    <li class="nav"> 
     <a src="about.php">ABOUT</a> 
    </li> 
    <li class="nav"> 
     <a src="right.php">RIGHT</a> 
    </li> 
</ul> 

は、その後、むしろあなたのナビゲーション機能を3回呼び出すよりも、クリックイベントのonloadイベントをバインドするためのjQueryのonload機能を使用しています。あなたがli<a>タグをクリックchildからSRCをつかむ。

$(function() 
{ 
    $('.nav').click(function() 
    { 
     if($(this).hasClass('active')) 
     { 
      return false; 
     } 
     $(this).siblings('li').removeClass('active'); 
     $(this).addClass('active'); 

     $('.content').slideUp(500).load($(this).children('a').attr('src'), 
      null, 
      function(){$(this).slideDown(500);} 
     ); 
     return false; 
    }); 
}); 

注意をreturn false;重要ですリンクのデフォルト動作を防止します(つまり、ユーザーを他のページに送る)。

+0

未知の型エラー:オブジェクト#には「子」というメソッドはありません javascript console show私のこのエラー あなたは何かを忘れてしまったのですか? – Qchmqs

+0

ガー、それは子供の子じゃない。テレビでUFCに気を散らされた。今更新しています。 – Endophage

+0

@Qchmqsは良いはずです。 – Endophage

0

リンクを解除できないようにするには、いくつかの方法があります。

$('nav')click(function(){ 
//Your code goes here 
$(this).unbind('click'); 
}); 

もう一つは、(noneからdisplayを設定)要素を隠すために、そのCSSを操作するために次のようになります。一つは、クリックイベント自体をアンバインドできるようになります。

質問の2番目の部分については、私はあなたがしたいことを実際には得られません。あなたがホバーにアクティブリンク、下の飛び出しを持っているしたい場合は、それは私が助けることができるが、なるだろう<ul>とその:hoverイベント

http://jsfiddle.net/D3AP2/

関連する問題