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;
}

Jquery的：

$('.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。然后当页面加载时只需添加类，就不需要在单击上执行：

<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');
});

我有点懒，并没有对此进行测试，但它应该让你接近你正在寻找的东西。

Answer 2

一种蛮力，丑陋的方式（我一直使用这种方法！:-)）是在每一页上放一个隐藏的div：

HTML

<div id='selectordiv'>blue</div>

CSS

#selectordiv {
     display: none;
}

JS

$(document).ready(function() {

    var selectorvar = $('#selectordiv').html();
    if (selectorvar == 'blue')
       {
        $('whateveryouwanttochange').css('todifferentattributes');
        }

                              });

可以概括为允许您根据隐藏div中放置的页面的“名称”执行各种操作。

只是一个想法。

Answer 3

您的代码中存在两个问题：

由于href
在css

您可以尝试以下代码：

.navigation li.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;
}

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

您也可以在一个容器中加载页面，然后将其附加到导航栏而不是重新加载页面，而不是href

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

3 个答案: