ajaxを使ったメニューナビゲーション

Question

私はAjaxを使用してdiv0xにロードされたいくつかのコンテンツを持つウェブサイトを作ろうとしていますが、メニュー内の選択したアイテムの現在のクラスを定義することはできません。

<nav id="menu"> 
     <ul> 
     <li> 
      <a href="pages/qui.php" 
      rel="address:/Qui" 
      title="Qui suis-je?" 
      class="qui ajax"> 
      Qui suis-je? &nbsp;&nbsp; 
      </a> 
     </li> 
     <li> 
      <a href="pages/portfolio.php" 
      rel="address:/portfolio" 
      title="Portfolio" 
      class="portfolio ajax"> 
      Portfolio &nbsp; &nbsp; 
      </a> 
     </li> 
     <li> 
      <a href="pages/contact.php" 
      rel="address:/contact" 
      title="Contact" 
      class="contact ajax"> 
      Contact &nbsp; &nbsp; 
      </a> 
     </li> 
     </ul> 
    </nav> 

私は戻るボタンをユーザーを有効にするには、asual jQueryプラグインを使用しています（多分現在の要素がjqueryのでは、メニューでクリックした定義するには、このプラグインを使用する方法があります）

Soが.. jqueryでうまくいかないので、もし誰かが助けることができれば、それは素晴らしいだろう。

Answer 1

私はあなたが正しいと思うので、あなたはmenueでクリックされた現在のボタンを見つけたいですか？

$(document).ready(function(){ 
    $('.ajax').click(function(){ 
     if($(this).hasClass('qui')) { 
      alert('qui was clicked'); 
     } 

     if($(this).hasClass('portfolio')) { 
      alert('portfolio was clicked'); 
     } 


     if($(this).hasClass('contact')) { 
      alert('contact was clicked'); 
     } 
    }); 
}); 

この例では、メニューボタンはクラスによって区別されていますが、これは最善の方法ではありません。しかし、クリックされたボタンを特定する方法を知っています。

それはあなたがボタンを操作したくない場合は、しかし、十分なのです（例えば、CSSを追加/削除）だけ要求を作りたい：

$(document).ready(function(){ 
    $('.ajax').click(function(event){ 
     event.preventDefault(); //prevent the <a> tag from calling its href 

     //check which button we are dealing with (see example above) 
     if($(this).hasClass('portfolio')) { 
      alert('portfolio was clicked'); 
      //we can add a css-class 
      $(this).addClass('portfolio-hover'); 
      //or we can add single css-attributes: 
      $(this).css('background-color', 'red'); 
     } 

     var page_to_be_loaded = $(this).attr('href'); 
     $.get(page_to_be_loaded, function(data) { 
      //data contains everything that the called php-file has outputted 
      $('#main').html(data); 
     }); 
    }); 
}); 

だけjQuery Documentationを見てみましょう。 、

<li> 
    <a href="pages/qui.php" 
    id="nav_qui" 
    rel="address:/Qui" 
    title="Qui suis-je?" 
    class="qui ajax"> 
    Qui suis-je? &nbsp;&nbsp; 
    </a> 
</li> 

//.... 
if($(this).attr('id')=='nav_qui') { 
    alert('qui was clicked'); 
} 
//.... 

Answer 2

あなたのNAV後

<div id="content"></div> 

を追加し、folowingのjQueryを追加します：また、あなたは正確にそれらを識別するために何かを持っているので、リンクにIDを追加する必要があります

$(".ajax").click(function(e) { 
    e.preventDefault(); 
    $.get($(this).attr("href"), function(data) { 
     $('#content').html(data); 
    }); 
});