2013-03-20 142 views
4

即時通訊類的名字,我想我的菜單不同的網站時點擊了顯示爲有效。我發現問題 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> 

任何線索,可能是什麼問題?先謝謝你。

+0

您的菜單是否在一個頁面上加載不同的部分或導航到其他頁面index.html,about.html等?如果它確實發送到其他頁面,那麼你發佈的jQuery將永遠不會爲你工作,因爲它不會將值存儲到任何地方,就我所見。 – 2013-03-20 15:26:08

+0

我正在使用動態網頁模板(.dwt文件),其中導航欄和JQuery是不可編輯的區域。該模板用於about.html和home.html。該菜單根據點擊導航到about.html或home.html。 – 2013-03-20 16:24:10

回答

5

要回答你的問題中的第一個答案,。家長(「禮」)的評論,你從當前位置向上走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'); 
     } 

    }) 

}) 
+0

如果默認的導航欄將'Home'設置爲'active',那麼當點擊鏈接並加載新頁面時,如果沒有'preventDefault()',如何維持新的'li'爲活動狀態。 – Wold 2014-03-17 01:16:00

+0

有什麼建議嗎? – Wold 2014-03-18 02:08:42

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

由於某種原因,我在發佈時錯過了$。 – 2013-03-20 10:49:07

+0

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

+0

我想我錯了..請檢查我更新的代碼.. – sasi 2013-03-20 10:52:57

0

一個非常簡單的解決辦法是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> 
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'); 
    } 
}); 

只有從標準引導菜單欄中的差異,你必須添加ID =「家」李爲主頁,等等。