Question

此引导导航栏active state在单击时效果很好，但如果我单击页面上的任何其他位置active state关闭，则会失去持久性。我如何解决此问题，以便在单击其他导航栏链接时仅丢失持久性？使用bootstrap.min.js来驱动活动链接。这是一个小提琴：http://jsfiddle.net/SquareGiraffe/qdj4qo0u/

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#welcome">Welcome</a></li>
            <li><a href="#2">Two</a></li>
            <li><a href="#3">Three</a></li>
            <li><a href="#4">Four</a></li>
            <li><a href="#5">Five</a></li> 
            <li><a href="#faq">FAQ</a></li> 
            <li><a href="#6">Six</a></li> 
            <li><a href="#7">Seven</a></li> 

          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </nav>

Answer 1

问题是引导程序不会将此视为一种可能性。

解决方法是添加此功能。我手边只有一个JQuery解决方案，你也可以使用普通的javascript

$(document).ready(function () {

    $(function () {
        $('li a').click(function (e) {
            $('a').removeClass('active');
            $(this).addClass('active');
        });
    });

});

和这个css代码

.active { color: #fff!important;}

这将解决您的问题。虽然这不是最漂亮的方法。

bootstrap navbar＆＃39; active＆＃39;如果点击页面，则会失去持久性

1 个答案: