更改活动导航栏

我用一个简单的引导顶部固定的导航栏，我想更改活动页面的颜色的颜色......但我觉得缺少的东西在我的代码更改活动导航栏

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

...我想例如（活动导航项目的）文本为红色，背景色为灰色（其他）...你有一个想法？

非常感谢！

来源

2013-04-07 ℕʘʘḆḽḘ

首先，有没有'.site_nav'元素。也许你的意思是'.nav'？ – 2013-04-07 18:37:13

的确非常感谢。我的意思是＃nav-collapse代替 – 2013-04-07 18:42:38

它应该工作...检查可能会覆盖您的代码的其他CSS冲突。 – 2013-04-07 18:44:07

如果你想保留活动项目的状态，那么你需要在每个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/

来源

2013-04-07 19:09:29

非常感谢你enrmarc，但正如我上面所说，我只有一个单一的HTML文件。并且导航栏允许用户来回浏览不同部分（研究等）。我只是想在项目研究，以保持灰色当用户点击它，然后如果用户点击其他项目（技能）技能，然后变成灰色等。 – 2013-04-07 19:17:33

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

这里是DEMO

来源

2013-04-07 18:47:03

非常感谢你的Miljan，但它不工作如上描述下.. – 2013-04-07 18:55:30

天上也许我应该指出，所有的导航链接都放在同一个页面！这可能是为什么它不能正常工作？把页面想象成一个包含所有内容的简历/ cv页面 – 2013-04-07 19:06:16

@noobie_on_android是的，你应该提到这一点。 – 2013-04-07 20:28:20

这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(); 
      } 
     });   
});

来源

2015-11-21 10:26:03 Derya

我用的console.log（）来找出哪些子到使用。我尝试使用onclick函数，因为我不想在第一次加载时激活它，但它的onclick函数对我不起作用！

Home

\t \t \t \t

Hotel

– Derya 2015-11-21 10:28:28

我有一个答案这是一个有点不同：

假设在导航栏的链接是链接此（本地服务器上，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，除去“主动”类，并把相应的“身份证的所有环节。通过各自的'id's，我的意思是id应该根据url来命名。

上面的JS代码是干什么的=>抓取url并将其拆分为stings数组并获取变量str中的第4个字符串（第4个字符串将有第3个索引）。然后，这只是把'积极'类放在这个环节。

效益这个方法：除了事实，这是很简单的，如果用户直接进入链接，而不是通过点击导航栏的链接，然后这种方法也适用。

问题用这种方法：在导航栏非常链接的URL必须是已知的。但是，如果url的格式不同，那么代码中的一些更改可以帮助您。

来源

2017-06-20 15:07:43

更改活动导航栏

回答

相关问题