引导Twitter的活跃导航栏 - 改变使用引导Twitter的使用JQuery

即时通讯类的名字，我想我的菜单不同的网站时点击了显示为有效。我发现问题 Bootstrap Twitter CSS Active Navigation处理这个问题。引导Twitter的活跃导航栏 - 改变使用引导Twitter的使用JQuery

我的问题是，我不能在其中一个答案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>

任何线索，可能是什么问题？先谢谢你。

来源

2013-03-20 Emil Nielsen

您的菜单是否在一个页面上加载不同的部分或导航到其他页面index.html，about.html等？如果它确实发送到其他页面，那么你发布的jQuery将永远不会为你工作，因为它不会将值存储到任何地方，就我所见。 – 2013-03-20 15:26:08

我正在使用动态网页模板（.dwt文件），其中导航栏和JQuery是不可编辑的区域。该模板用于about.html和home.html。该菜单根据点击导航到about.html或home.html。 – 2013-03-20 16:24:10

要回答你的问题中的第一个答案，。家长（“礼”）的评论，你从当前位置向上走DOM会得到任何发现李的父母。添加：第一个伪选择器可确保您找到第一个。

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

是否可以在浏览器只是加载你一个新的页面？我没有看到你打电话event.preventDefault()，其实你不要在你的代码捕获事件，你刚才应对它...

而且，。对现在绑定到事件的首选方式：

$(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-20 12:59:57

如果默认的导航栏将'Home'设置为'active'，那么当点击链接并加载新页面时，如果没有'preventDefault（）'，如何维持新的'li'为活动状态。 – Wold 2014-03-17 01:16:00

有什么建议吗？ – Wold 2014-03-18 02:08:42

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

来源

2013-03-20 10:46:09 sasi

由于某种原因，我在发布时错过了$。 – 2013-03-20 10:49:07

所以去第二点使用.on for .delegate – sasi 2013-03-20 10:49:38

我想我错了..请检查我更新的代码.. – sasi 2013-03-20 10:52:57

一个非常简单的解决办法是manualy添加不同的类，每个页面的正文这表明其资产净值的项目应该是积极的。

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

来源

2013-03-20 15:30:20

我知道这有点晚了，但是，比从未更好。

我也有这个相同的问题，并最终编写我自己的代码。

希望这对大家有用，就像我一样。

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'); 
    } 
});

只有从标准引导菜单栏中的差异，你必须添加ID =“家”李为主页，等等。

来源

2013-07-27 05:46:22 EMurph78

引导Twitter的活跃导航栏 - 改变使用引导Twitter的使用JQuery

回答

相关问题