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

为了切换课程，您需要执行一些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 2

这就是我最终得到的，因为您也必须清除其他人。

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

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圈，具体取决于我的导航的结构如何

只需确保您的一个链接都没有主动课程即可开始。

实际链接

如果您的导航链接位于单独的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。您还希望当您选择的列表项目已经处于活动状态时，代码不做任何事情 - 不必要添加和删除相同的活动类。最后，您应该将活动听众放在A元素上，而不是LI上，因为它具有更轻松的时间来触发iPhone和平板电脑上的点击事件等。 .delegate 因此，您不必等待DOM就绪活动。因此，最后我会做这样的事情（我假设您已经预装了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>

这就像魅力一样。

Answer 7

我做了一些不同的事情来解决这个问题（仅供参考，我是一个完整的HTML/CSS/JS业余爱好者）。

我的每个Navbar按钮都进入一个新页面。因此，在每个页面的HTML中，我将类似的东西放在底部：

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

这立即为我工作。

PS我尝试了接受的答案，但没有运气，因为它也需要从当前活动的按钮中删除“活动”类以真正“开关”。我敢肯定，这是可能的，但是再次，我对这些东西很陌生。

Answer 8

经过测试，效果很好。

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

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>

Answer 9

任何使用JSP遇到问题的人，请观看您的包裹。

document.location.pathname给我：/packagename/index.jsp

但是我的纳维尔（Navbar）中的href叫index.jsp

因此，要编辑Konsumer的答案：

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

Answer 10

我尝试了上面的一些最高答案，它适用于“活性”类，但是链接无法正常工作，它仍然保留在当前页面上。然后我尝试了：

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

我在这里找到了： Twitter引导程序将活动类添加到Li

Answer 11

<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

Answer 12

添加到您的JavaScript：

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

Answer 13

这已经变得很老，并带有答案，但是我取得了最佳的答案，并使其变得更好。最佳答案仅在页面上有一个时起作用。这将其范围从中删除 sibling 元素并将其添加到您单击的元素中。

我还添加了课程 nav-toggle 因此，它不会干扰已经随附Bootstrap JS的东西。

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