Question

我正在使用一个简单的bootstrap顶部固定导航栏，我想更改活动页面的颜色...但是我认为我的代码中缺少某些内容

<div class="navbar">
    <div class="navbar-fixed-top">
      <div class="container" style="width: auto;">
          <div class="nav-collapse" id="nav-collapse">
          <ul class="nav" id="nav">
            <li class="active"><a href="#skdill" >skisll</a></li>
            <li class="active"><a href="#skill">skill</a></li>
            <li class="active"><a href="#research">research</a></li>
            <li class="active"><a href="#">Link</a></li>
                     </ul>
        </div>
      </div>
    </div>
  </div>

，CSS是

.navbar {
    position: fixed;
    width: 100%;
}
.navbar .nav {
   float: none;
}
.navbar .nav>li {
    width: 25%;
}
.content {
    padding-top: 80px;
}

#nav-collapse li a:hover { 
    color: blue; 
}
#nav-collapse a:hover { 

    background-color: gray; 
}

#nav-collapse  li.active { 
   color:green;
    background-color: yellow; 
}
#nav-collapse  li.active a {
    color: red;
}

...我希望例如文本（活动导航项目）为红色，背景颜色为灰色（无论如何）......你有什么想法吗？

非常感谢！

Answer 1

如果要保持活动项的状态，则需要在每个html文件中包含导航栏布局。例如，如果您点击Research，则research.html导航栏必须

<div class="navbar">
<div class="navbar-fixed-top">
  <div class="container" style="width: auto;">
      <div class="nav-collapse" id="nav-collapse">
      <ul class="nav" id="nav">
        <li ><a href="#skdill" >skisll</a></li>
        <li ><a href="#skill">skill</a></li>
        <li class="active"><a href="#research">research</a></li>
        <li ><a href="#">Link</a></li>
                 </ul>
    </div>
  </div>
</div>

等等所有链接。

修改您可以使用JavaScript并执行操作：

<!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> </style> </head> <script> $(function() { $('#nav li a').click(function() { $('#nav li').removeClass(); $($(this).attr('href')).addClass('active'); }); }); </script> <body> <div class="navbar"> <div class="navbar-fixed-top"> <div class="container" style="width: auto;"> <div class="nav-collapse" id="nav-collapse"> <ul class="nav" id="nav"> <li id="home"><a href="#home">Home</a></li> <li id="skill"><a href="#skill">Skill</a></li> <li id="research"><a href="#research">Research</a></li> <li id="link"><a href="#link">Link</a></li> </ul> </div> </div> </div> </div> </body> </html>

演示： http://jsfiddle.net/Ag47D/3/

Answer 2

.navbar #nav > .active > a {
    color: red;
}

这是 DEMO

Answer 3

我的答案有点不同：

假设导航栏中的链接是链接（在本地服务器上，https://myweburl.com将替换为https://localhost:8000或https://127.0.0.1:8000）：

首页=＆gt; https://myweburl.com

Blog =＆gt; https://myweburl.com/blog/1，https://myweburl.com/blog/2等

技能=＆gt; https://myweburl.com/skills/

联系人=＆gt; https://myweburl.com/contact/

$(document).ready(function () {
    var loc = window.location.href; // grabbing the url
    var str = loc.split("/")[3]; // splitting the url and taking the third string
    if(str.localeCompare("") == 0)
      $("#home").addClass("active");
    else
      $("#" + str).addClass("active");
});

此外，在您的HTML中，删除“有效”类并将相应的“ID”放入所有链接。通过各自的'id'，我的意思是id应该根据url命名。

以上JS代码正在做什么=＆gt;抓住网址并将其拆分为stings数组并将第4个字符串放入变量str（第4个字符串将具有第3个索引）。然后，它只是将“活跃”类放在该链接中。

此方法的好处：除了它非常简单之外，如果用户通过单击导航栏中的链接直接转到链接，那么此方法也可以。

此方法存在问题：必须知道导航栏中非常链接的网址。但是，如果网址的格式不同，那么代码中的一点变化就可以帮助您。

Answer 4

这个js对我有用，我把它放在导航为php的每个页面上：

 <script>
 $(function() { 

        var path = window.location.pathname;
        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        $(".nav li a").each(function () {
            var href = $(this).attr('href');
            if(path.substring((path.lastIndexOf('/')+1),path.lenght) === href) {    
                $(this).closest('li').addClass('active');
            } else {
                $(this).closest('li').removeClass();
            }
        });         
 });

更改活动导航栏的颜色

4 个答案: