导航在Jquery中添加活动链接

时间:2009-12-03 15:13:24

标签: jquery navigation

我使用与此问题中回答的js相同的js:https://stackoverflow.com/questions/302955/active....

我的问题是,我不想将类添加到默认链接,而是希望将类添加到具有相同目录的链接。

示例:Page2位于不同的目录中。在该页面上单击导航之外的链接。当你进入下一页时,我如何在Page2链接上保留该活动类?

这是导航

    <div id="nav">
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="test/index.html">Page2</a></li>
                <li><a href="test2/index.html">Page3</a></li>
</ul>
</div>

下面是我的jquery。第一部分完美,第二部分是我遇到麻烦的地方:

function markActiveLink() {var currentURL = window.location.toString().split("/");
$("#nav li a").filter(function() {
//alert(currentURL);
    return $(this).attr("href") == currentURL[currentURL.length-1];
    }).parent().addClass("current");
if($("#nav li").hasClass("current") == false) {
     alert(currentURL[currentURL.length-2]);

    }
 }

markActiveLink();

提前谢谢!

1 个答案:

答案 0 :(得分:0)

这应该有效。考虑整个路径不仅仅是它的最后一部分。

function markActiveLink() {
    var path = location.pathname.substring(1);
    $('#nav li a[href="' + path + '"]').parent().addClass("current");
    if($("#nav li").hasClass("current") == false) {
      //whatever e.g. select default
      $('#nav li').eq(0).addClass("current");
    }
}

markActiveLink();