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

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就绪事件。所以最后我会做这样的事情（我假设你已经预装了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

我做了一些不同的事来解决这个问题（fyi，我是一个完整的html / css / js业余爱好者）。

我的每个导航栏按钮都转到一个新页面。所以，在每个页面的html中，我在底部放了这样的东西：

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

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

这让我立即为我工作。

P.S。我尝试了接受的答案，但没有运气，因为它还需要从当前活动按钮中删除“活动”类以真正“切换”。我确信这是可能的，但同样，我对这些东西很陌生。

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

但我的导航栏中的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

我尝试了上面的一些顶级答案，它适用于＆＃34; .active＆＃34;类，但链接不能正常工作，它仍然保留在当前页面上。然后我尝试了这个：

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 Bootstrap add active class to 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();
});

Bootstrap CSS主动导航

13 个答案:

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

实际链接

哈希链接