更改活动导航栏的颜色

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

我正在使用一个简单的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;
}

...我希望例如文本(活动导航项目)为红色,背景颜色为灰色(无论如何)......你有什么想法吗?

非常感谢!

提问于
用户回答回答于

如果要保持活动项的状态,则需要在每个html文件中包含导航栏布局。例如,如果您单击,Researchresearch.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/

用户回答回答于

扫码关注云+社区

领取腾讯云代金券