4

次のJqueryを使用して、ナビゲーションの現在のページへのリンクを強調表示しています。

// Add Active Class To Current Link
var url = window.location; // get current URL
$('#nav a[href="'+url+'"]').addClass('active');

私のナビゲーションは次のようになります。

<nav>
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About Us<b class="caret"></b></a>
      <ul>
        <li><a href="">Sub Link 1</a></li>
        <li><a href="">Sub Link 2</a></li>
        <li><a href="">Sub Link 3</a></li>
      </ul>
    </li>
    <li><a href="">Products</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

ナビゲーションには、「AboutUs」セクションのサブナビゲーションがあります。

「AboutUs」リンクに「active」クラスを受信させて、そのサブナビゲーションページの1つにいるときに強調表示されたままにしたいのですが。

たとえば、「サブリンク2」ページを表示している場合、「AboutUs」リンクにアクティブなクラスが与えられます。

誰かが私をここで正しい方向に向けることができますか？

ご協力いただきありがとうございます

4

1 に答える 1

5

以下のコードを試してください、

// Add Active Class To Current Link
var url = window.location; // get current URL
$('#nav a[href="'+url+'"]').addClass('active');

var $activeUL = $('.active').closest('ul');
/*
Revise below condition that tests if .active is a submenu
*/
if($activeUL.attr('id') != 'nav') { //check if it is submenu
    $activeUL
        .parent() //This should return the li
        .children('a') //The childrens are <a> and <ul>
        .addClass('active'); //add class active to the a    
}
于 2012-04-24T18:23:01.523 に答える