更改活动导航栏的颜色

Question

更改活动导航栏的颜色

4

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

我希望比如说当前导航项的文本颜色是红色，背景颜色是灰色（随便什么颜色）...你有什么想法吗？

非常感谢！

- ℕʘʘḆḽḘ

首先，没有.site_nav元素。也许你是指.nav？ - Albert Xing

非常感谢。我是指 #nav-collapse。 - ℕʘʘḆḽḘ

1

它应该可以工作... 检查其他可能覆盖您代码的CSS冲突。 - Albert Xing

为什么你把所有链接都设置为活动状态（.active）？ - pietroalbini

我认为我应该更好地解释一下我想要的是什么：当用户悬停在技能部分上时，技能项目变为灰色。然而，如果用户单击技能，则该项目不会保持灰色...这就是我想要实现的！这就是我所谓的活动项目。如果术语不正确（我是新手），请见谅...你觉得呢？非常感谢。 - ℕʘʘḆḽḘ

4个回答

1

我有一个答案与其他答案略有不同，对我非常有效：

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

首页 => https://myweburl.com 博客 => https://myweburl.com/blog/1, https://myweburl.com/blog/2等。

技能 => https://myweburl.com/skills/

联系方式 => 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中，删除“active”类并在所有链接中放置相应的ID。通过相应的ID，我的意思是ID应该根据URL命名。

上面的JS代码的作用：获取URL并将其拆分为字符串数组。然后，它将第4个字符串放入变量str中（第四个字符串将位于第三个索引处）。然后，它将“active”类放入该链接中。

这种方法的好处：除了它非常简单之外，如果用户直接转到链接而不是在导航栏中单击链接，则此方法也起作用。

此方法的问题：必须知道导航栏中每个链接的URL。如果URL的格式不同，则可以稍微更改代码。

- as2d3

1

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

这里是演示。

- Miljan Puzović

哦，我可能应该提一下所有的导航链接都在同一页上！这可能就是为什么它不能正常工作的原因吧？把这个页面想象成一个包含所有内容的单页简历/履历页面。 - ℕʘʘḆḽḘ

@noobie_on_android，是的，你应该提一下。 - Miljan Puzović

0

这个 JavaScript 对我很有用，我把它放在每个包含 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();
            }
        });         
 });

- Derya

我使用console.log()来确定要使用哪个子字符串。我尝试使用onclick函数，因为我不想在第一次加载时激活它，但是onclick函数对我无效！<ul class="nav navbar-nav"> <li class=""> <a href="index">主页</a> </li>
<li class=""> <a href="accomodation">酒店</a> </li></ul> - Derya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcos · Accepted Answer

如果您想保留活动项的状态，则需要在每个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>

Demo: http://jsfiddle.net/Ag47D/3/