4

我使用引导推特，我希望菜单中的不同站点在单击时显示为活动状态。我找到了解决此问题的问题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>

关于可能是什么问题的任何线索？先感谢您。

4

4 回答 4

5

要在第一个答案的评论中回答您的问题， .parents('li') 会在您从当前位置走上 DOM 时找到任何 li 父母。添加 :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');
        }

    })

})
于 2013-03-20T12:59:57.620 回答
1

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

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

希望这对每个人都适用，就像我一样。

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 中，依此类推。

于 2013-07-27T05:46:22.270 回答
0 
if (!$thisLi.hasClass('active'))
    {
        $ul.find('li').removeClass('active');
        $thisLi.addClass('active');
    }
于 2013-03-20T10:46:09.093 回答
0

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

然后使用 jQuery 检查 body 上的类是什么，并相应地设置活动的 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>
于 2013-03-20T15:30:20.770 回答