引导导航栏活动类不起作用答案

【问题标题】：Bootstrap navbar active class not working引导导航栏活动类不起作用
【发布时间】：2015-12-25 23:46:12
【问题描述】：

我正在尝试让活动类与我的 Bootstrap 导航栏一起使用，但它不起作用（我假设是因为我对导航类进行了太多 CSS 更改）。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
    <link href="css/base.css" type="text/css" rel="stylesheet">
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
</head>

<style>
    #nav {
      white-space: nowrap;
      width: 100%;
      float: left;
      margin-left: auto;
      margin-right: auto;
      margin-bottom:10px;
      display: inline;
      padding: 0;
      background-color: #FFFFFF;
      border-bottom: thin solid #000099;
      padding-bottom: 4px;
      text-align: center;   
    }
    #nav ul {
      list-style: none;
      width: 100%;
      margin: 0 auto;
      display: inline-block;
      vertical-align: top;
      padding: 0; 
    }
    #nav li {
      display: inline-block
    }
    #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      text-align: center;
      font-weight: bold;
      color: #424245;
      border-right: 1px solid #ccc; 
    }
    #nav li:last-child a {
      border-right:none; 
    }

</style>
<div id="nav">
    <ul>
        <li class="active"><a href="#">Find It Myself</a></li>
        <li><a href="ask_the_community.html">Ask The Community</a></li>
        <li><a href="get_help.html">Get Help</a></li>
    </ul>
</div>

代码笔here。活跃的班级什么都不做。最重要的是，我想让活动类看起来像这样：

下面的蓝色条，而不是 Bootstrap 具有的标准深灰色背景。我会满足于只使用深灰色背景，但希望获得有关如何完成蓝色条的建议。

谢谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我能够通过修改您的 CSS 并创建您自己的 active 类来达到您想要的效果（以下只是对您的 CSS 所做的更改）：

#nav {
/* removed bottom border form nav */
}
#nav ul {
  /* changed to inline block and put border from #nav here */
  display: block;
  border-bottom: thin solid #000099;
}
#nav li.active {
  /* created active class for your li elements */
  border-bottom: 3px solid #000099;
}

Codepen Demo

【讨论】：

差不多了。 OP 提供的模型具有更等于文本宽度的底部边框。虽然我不知道蓝色条应该始终是文本的宽度或标准化的固定宽度。
是的，它足够接近，我可以继续使用它，谢谢 JRulle。导航栏适用于移动设备，因此它的文本长度实际上是完美的。
这是一个稍微调整过的版本，条形与文本的宽度相同：codepen -- 我主要只是更改了现有导航的哪些元素具有哪些属性（即，将 border-right 从a 到父 li 并将 li.active a 样式设置为厚 border-bottom css）——你可能仍然想稍微调整一下值，但这应该是一个很好的起点

【解决方案2】：

您需要使用活动类将 CSS 样式应用于 <li>。

例如：

#nav ul li.active {
    background-color: #FF0000;
}

这适用于您的代码笔。

【讨论】：

当然，这只是将背景变为红色以显示它有效。您必须更改您需要的实际样式才能完成您正在寻找的厚底边框。

【解决方案3】：

我不建议这样做，但对我没有任何帮助。我用 JS 试过这个，但是当页面刷新时，它就消失了。 CSS也没有工作。尝试一切，如果没有任何效果，试试这个。

<div class="hidden" id="toMakeThisActive">home</div>

将其放在您的每个页面中。将名称“home”更改为您的相关页面。

 <li class="" id="home"><a href="link">Home</a></li>

为菜单设置与相关页面名称相同的 ID。这里是“家”。

  $(document).ready(function(){
    var id = $('html #toMakeThisActive').text();
    $('#'+id).attr('class','active');
  });

在您的页面中添加此代码。这肯定会奏效。 :)

（当根据菜单刷新页面时，这不是最好的方法。但它有效。）

【讨论】：