如何在某个页面上更改导航栏的颜色？

我在网站上有一个导航栏，当我在某个页面上时，我希望页面名称改变颜色，以便当我再点击另一个页面时，它会返回到原始颜色，并选择新页面会改变颜色。如何在某个页面上更改导航栏的颜色？

我环顾了一会儿，试图让它工作，我可以得到的只是它改变颜色，当我点击它，然后加载页面，它回到它的原始颜色。

列表：

<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：

有谁知道什么是错？这真让我烦恼。

来源

2014-01-26 Aaron Kelsey

您正在执行整页加载，因此必须使用某些服务器代码突出显示（放置相应的CSS类）正确的项目。 –

这是html，css，jquery的标签，是一个静态网站吗？如果是这样，使用jQuery是没有意义的。只需在每个页面的html文件中添加相应的'li'的类。如果它不是静态的，你应该更新你的问题。 – Kaloyan

您网站上有多少页？ – TimSPQR

尝试使用页面名称为您更改类。下面就来让页面的域名（我是从这里的方法：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'); 
});

我有点懒，没有测试这一点，但它应该让你接近你在找什么

来源

2014-01-26 14:53:36

谢谢，它完美无缺地工作！ –

没问题，很高兴它的工作。 –

由于在导航栏上添加了额外的页面，它突然停止工作，但我不知道为什么，

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

HTML

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

CSS

#selectordiv { 
    display: none; 
}

$(document).ready(function() { 

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

           });

它可以被推广到让你做这取决于你把该页面的 “名称” 各种各样的事情在隐藏的div中。

只是一个想法。

来源

2014-01-26 14:59:18 TimSPQR

有两个问题在你的代码：

页面被点击后重新加载由于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您可以将您的页面加载到一个容器中，然后将其附加到导航栏而不是重新加载页面

来源

2014-01-26 15:01:02

如何在某个页面上更改导航栏的颜色？

回答

相关问题