Bootstrap CSS主动导航

Question

在Bootstrap网站上,subnav与各部分匹配并更改背景颜色或滚动到该部分.我想创建自己的菜单,没有所有背景颜色和所有内容,但是,我将CSS更改为类似但是当我向下滚动或单击菜单项时,活动类不会切换.不知道我做错了什么.

HTML:

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

我查了一下文件; jQuery,bootstrap.js和bootstrap.css都正确链接.我是否必须添加一些额外的jQuery,或者我是否缺少一些CSS以使主动切换像他们网站上的subnav菜单一样？

Answer 1

这就是我最终的结果,因为你必须清除其他人.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

Answer 2

要切换类,您需要执行一些JavaScript.

在jQuery中:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

在JavaScript中:

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

我希望这有帮助.

Answer 3

这是我处理twitter bootstrap导航列表的代码:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

Answer 4

我使用2个1-liners,具体取决于我的导航结构

只需确保您的所有链接都没有活动类即可启动.

实际链接

如果导航链接位于单独的HTML文件中(如express.js中包含菜单的布局模板),则可以执行以下操作:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

哈希链接

如果它们是哈希值,请执行以下操作:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

如果您不想滚动哈希点击,则返回false:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

Answer 5

查看其他一些答案,如果您希望在单击侧边菜单时向下滚动到该部分,则您不希望这样做preventDefault.

此外,您只需要删除当前活动类并添加一个新类,而不是搜索所有li.当您选择的列表项已经激活时,您还希望代码不执行任何操作 - 不必无需添加和删除相同的活动类.最后,你应该把你的事件监听器放在一个元素而不是li上,因为它更容易在iPhone和平板电脑上触发点击事件等.也可以使用,.delegate所以你不必等待DOM ready事件.所以最后我会做这样的事情(我假设你已经预装了jQuery):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

Answer 6

我建议这段代码:

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

它的工作就像一个魅力.