jquery - 如何在特定页面上更改导航栏的颜色？

Question

我在一个网站上有一个导航栏，当我在那个特定页面上时，我希望页面名称改变颜色，这样当我点击另一个页面时，它会恢复到原来的颜色和新页面选择将改变颜色。

我环顾四周试图让它工作，我所能做的就是在我点击它时改变颜色，然后页面加载并恢复到原来的颜色。

列表:

<nav>
    <ul class="navigation">
        <li><a href="pages/page1.html" title="Page One">Page One</a></li>
        <li><a href="pages/page2.html" title="Page Two">Page Two</a></li>
        <li><a href="pages/page3.html" title="Page Three">Page Three</a></li>
    </ul>
</nav>

CSS:

.navigation .active {
background-color: #CF5C3F;
}

.navigation li { 

float:left; border-right:1px solid #5d5d5d; 
border-left:1px solid #929292;
width: 268px; 
height: 34px; 
border-bottom:1px solid #575757; 
border-top:1px solid #797979;
background-color:#5f5f5f;
}

J查询:

$('.navigation a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    });

有谁知道哪里出了问题吗？这真的让我很烦。

Answer 1

尝试使用页面名称为您更改类别。这是获取页面名称的方法(我从这里获取:How to get the pagename from the URL without the extension through JQuery

function getPageName(url) {
    var index = url.lastIndexOf("/") + 1;
    var filenameWithExtension = url.substr(index);
    var filename = filenameWithExtension.split(".")[0]; // <-- added this line
    return filename;                                    // <-- added this line
}

在每个链接上放置一个 id，该 id 也等于页面名称。然后当页面加载时只需添加类，无需在点击时执行此操作:

<nav>
    <ul class="navigation">
        <li><a id="page1" href="pages/page1.html" title="Page One">Page One</a></li>
        <li><a id="page2" href="pages/page2.html" title="Page Two">Page Two</a></li>
        <li><a id="page3" href="pages/page3.html" title="Page Three">Page Three</a></li>
    </ul>
</nav>

$(function(){
   var currentPageName = getPageName(window.location.pathname);
   $('#' + currentPageName).addClass('active');
});

我有点懒，没有测试这个，但它应该让你接近你正在寻找的东西。