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

Question

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

4

我正在使用Bootstrap Twitter，希望我的菜单中的不同站点在单击时显示为活动状态。我发现了这个问题：Bootstrap Twitter CSS Active Navigation，它解决了这个问题。我的问题是，我无法使其中一个答案中的JQuery函数起作用。修改非常简单，可以使其在我的HTML中运行，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>

有什么线索能够说明问题所在吗？提前感谢您的帮助。

- Emil Nielsen

你的菜单是在同一页上加载不同的部分，还是导航到其他页面，例如index.html、about.html等等？如果它导航到其他页面，那么你发布的jQuery代码将永远无法为你工作，因为据我所见它没有存储任何值。 - Billy Moat

我正在使用一个动态网页模板（.dwt文件），其中导航栏和JQuery是不可编辑的区域。该模板用于about.html和home.html两个页面。菜单根据所点击的内容导航到about.html或home.html。 - Emil Nielsen

4个回答

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以用于主页等页面。

- EMurph78

0

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

- sasi

由于某些原因，在发布时我错过了$符号。 - Emil Nielsen

很遗憾，看起来它似乎不起作用。您知道.parents（'li:first'）中的li:first是什么意思吗？我以前见过li.first()的用法 - 但不是这种方式。 - Emil Nielsen

0

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

然后使用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>

- Billy Moat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thom Porter · Accepted Answer

为了回答你在第一个答案的评论中提出的问题，.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');
        }

    })

})