Question

我正在使用bootstrap twitter，我希望菜单中的不同网站在点击时显示为活动状态。我找到了问题 Bootstrap Twitter CSS Active Navigation来处理这个问题。

我的问题是我无法在其中一个答案中使用JQuery函数。修改应该非常直接，以使其在我的情况下工作，在HTML中是：

<script>
$('body').on('.nav 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');
    }
});
</script>

<ul class="nav nav-pills pull-left">
    <li class="active"> <a href="home.html">Home</a> </li>
    <li> <a href="about.html">About</a> </li>
</ul>

关于可能出现什么问题的任何线索？提前谢谢。

Answer 1

要在第一个答案的评论中回答您的问题，.parents（＆＃39; li＆＃39;）会在您从当前位置向上走DOM时找到任何李父母。添加：first伪选择器可确保您找到第一个伪选择器。

更好的解决方案是使用.parent（单数）。例如：$thisLi.parent('ul')。我不相信这是你的问题......

浏览器是否可能只是在您上面加载新页面？我没有看到你拨打event.preventDefault()，事实上你没有在你的代码中捕获这个事件，你只需回复它......

此外，.on是现在绑定到事件的首选方式：

$(function(){

    $('.nav li a').on('click', function(e){

        e.preventDefault(); // prevent link click if necessary?

        var $thisLi = $(this).parent('li');
        var $ul = $thisLi.parent('ul');

        if (!$thisLi.hasClass('active'))
        {
            $ul.find('li.active').removeClass('active');
                $thisLi.addClass('active');
        }

    })

})

Answer 2

我知道这有点晚了，但迟到总比没有好。

我也有同样的问题，最后编写了我自己的代码。

希望这对每个人都有效，就像我一样。

的jQuery

    $(document).ready(function () {
 var page = document.location.href;

 // Set BaseURL
 var baseURL = 'http://www.site.com/';

 // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  if(page == ''){
      $('#home').addClass('active');
  }else{
      $('#home').removeClass('active');
  }
  if(page == 'about'){
      $('#about').addClass('active');
  }else{
      $('#about').removeClass('active');
  }
  if(page == 'terms'){
      $('#terms').addClass('active');
  }else{
      $('#terms').removeClass('active');
  }
  if(page == 'contact'){
      $('#contact').addClass('active');
  }else{
      $('#contact').removeClass('active');
  }
});

与标准的Bootstrap菜单栏不同的是，您必须将id =“home”添加到主页的li，依此类推。

Answer 3

if (!$thisLi.hasClass('active'))
    {
        $ul.find('li').removeClass('active');
        $thisLi.addClass('active');
    }

Answer 4

一个非常简单的解决方案是手动为每个页面的正文添加一个不同的类，以指示哪个导航项应该处于活动状态。

然后使用jQuery检查正文中的类是什么，并相应地设置活动的NAV LI类。

<body class="nav-1-active">

<ul>
 <li class="nav1"><a href="#">Home</a></li>
 <li class="nav2"><a href="#">About Us</a></li>
 <li class="nav3"><a href="#">Our Services</a></li>
</ul>

Bootstrap twitter活动导航栏 - 使用JQuery更改类名

4 个答案: