1

jQueryを使用して現在のナビゲーションアイテムのスタイルを設定する方法がわかりません。私はいくつかのチュートリアルなどを試しましたが、役に立ちませんでした。どんな助けでもいただければ幸いです。前もって感謝します。

    <div id="menu">
     <ul id="nav">  
      <li><a href="http://poolguys.jaredmc.com/index.php">Contact</a></li> 
      <li><a href="http://poolguys.jaredmc.com/index.php">Gallery</a></li>
      <li><a href="http://poolguys.jaredmc.com/pool_liners.php">Pool Liners</a></li>
      <li><a href="http://poolguys.jaredmc.com/services.php">Services</a></li>
      <li><a href="http://poolguys.jaredmc.com/about.php">About</a></li> 
      <li><a href="http://poolguys.jaredmc.com/index.php">Home</a></li> 
    </ul><!--end nav-->         
  </div><!--end menu--> 

   /** nav styling **/

   //<![CDATA[
    jQuery(function() {
     jQuery('#nav li').each(function() {
      var href = jQuery(this).find('a').attr('href');
      if (href === window.location.pathname) {
      jQuery(this).addClass('current');
       }
      });
    });  
  //]]>
4

2 に答える 2

0

Attribute Equals Selector [name = "value"]を使用して、現在のパスを持つナビゲーションアイテムを見つけることができます。

$(document).ready(function () {
    var str = location.href.toLowerCase();
    var item  = $('#nav li a[href="' + str  + '"]');
    if(item.length){
        $("li.current").removeClass("current");
        item.parent().addClass("current");
    }
})

デモ：フィドル

于 2013-03-16T17:28:39.560 に答える
0

私はそれを考え出した！！Will.i.amとArun.pにご協力いただきありがとうございます。以下のコード行は、各ページに本文IDを指定した後に必要なすべてです。

     /** nav selector **/
     var bodyid = $('body').attr('id');  
     $('#main_nav ul li a.'+ bodyid).addClass('current');
于 2013-03-20T14:33:26.860 に答える