Question

我试图让活动课程与我的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>

Codepen here。活动类什么都不做。最重要的是，我想让活跃的课程看起来像这样：

下方的蓝色栏而不是Bootstrap所具有的标准深灰色背景。我只是满足于深灰色的背景，但想知道如何完成蓝色条。

感谢。

Answer 1

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

例如：

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

这适用于您的codepen。

Answer 2

我能够通过修改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

Answer 3

我不推荐这个，但没有任何对我有用。我用JS尝试了这个，但是当页面刷新时，它就消失了。 CSS也没有用。尝试一切，如果没有任何效果，试试这个。

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

将其放在每个页面中。更改名称＆＃34; home＆＃34;到你的相关页面。

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

将菜单的相同ID设置为相对页面的名称。在这里＆＃34; home＆＃34;。

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

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

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

Bootstrap导航栏活动类无法正常工作

3 个答案: