引导导航栏错误答案

【问题标题】：Bootstrap navbar error引导导航栏错误
【发布时间】：2015-04-28 20:01:20
【问题描述】：

当我开始使用引导程序时，一切正常，导航栏看起来很棒等等。但后来我发现了一些东西。当我点击栏中的主页链接时，它就完成了它的工作，它把我带到了主页。但是，当我单击例如联系人时。它把我带到了联系页面，但主页链接仍然亮着。所以基本上导航栏说我仍然在主页上，而我显然在联系页面中。

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="bootstrap-3/js/bootstrap.js"></script>
        <script src="bootstrap-3/js/bootstrap.min.js"></script>
        <title>Welcome to the homepage!</title>
    </head>
    <body>  
        <header class="navbar-inverse" role = "banner">
           <div class="container">
            <nav role="navigation">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Blahblahism</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                   <ul class="nav navbar-nav">
                       <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                       <li><a href="contact.html">Contact</a></li>
                    </ul>
                  </div>
                  </form>
              </div><!-- /.container-fluid -->
            </nav>
          </div>       
        </header>   
    </body>
</html>

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

你可以在这里看到：

<li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
<li><a href="contact.html">Contact</a></li>

您已将 active 类添加到第一个 li 元素（此处为主页）。因此，在每个页面中，您都会看到 Home 项目被选中。

您要做的就是将active 类添加到您的当前页面。

根据您的架构，可以在服务器端或客户端完成。

【讨论】：

不客气 :) 然后您可以选择已接受的答案。

【解决方案2】：

你可以删除活动类：

<ul class="nav navbar-nav">
  <li **class="active"**><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

然后：

<ul class="nav navbar-nav">
  <li><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

你的问题就解决了。

【讨论】：

【解决方案3】：

要在 Bootstrap 中将元素点亮为活动元素，您需要向其添加 active 类：

在你的情况下，这意味着：

在homepage.html中：

<ul class="nav navbar-nav">
  <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

在contact.html中：

<ul class="nav navbar-nav">
   <li><a href="index.html">Home</a></li>
   <li class="active"><a href="contact.html">Contact</a></li>
</ul>

更多关于活动类的信息可以在Bootstrap's Documentation找到

【讨论】：

【解决方案4】：

这不是 Bootstrap 的错误，因为您需要更改每个页面上哪个菜单项是“活动的”。为此，您需要将活动类添加到列表项元素以将正确的链接突出显示为活动

 <li class="active">

所以在主页上你的代码应该和上面一样：

<ul class="nav navbar-nav">
   <li class="active"><a href="index.html">Home</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

在联系页面上应该如下：

<ul class="nav navbar-nav">
    <li><a href="index.html">Home </a></li>
    <li class="active"><a href="contact.html">Contact</a></li>
</ul>

注意：我已经删除了 sr-only 跨度以使该解决方案更易于阅读。

【讨论】：