使用空白鏈接添加和刪除類的作品，但沒有與頁面鏈接

Question

我真的很喜歡jquery，但我嘗試了幾乎比我最好解決它通過閱讀由有價值的用戶Stackoverflow創建的舊帖子。 我的問題是我嘗試添加類onclick事件。它的工作，只有當我設置超鏈接到空白（＃）<a href="#">test</a>，但如果我設置爲超鏈接狀態<a href="product.php"然後它刪除並添加類一段時間，當前頁面打開後，它會自動刪除活動類，並設置它如前所述。 :( 我的js代碼..

$('ul#menu li a').click(function() { 
    $('ul#menu li a').removeClass('active'); 
    $(this).toggleClass('active'); 
}); 

Answer 1

您example.com/product.php被加載後，你所面對的問題是活躍類不會保留在相應的錨標記中，因爲JavaScript在加載時不會將狀態舊頁面帶到新頁面。你可以用兩種方法做到這一點

1. 你可以禁用頁面加載並保持在同一頁面。

   $('ul#menu li a').click(function(e) { 
       e.preventDefault();//this will stop the current event which is your page load 
       $('ul#menu li a.active').removeClass('active');//this will remove the active class from only a tag having active as class 
       $(this).toggleClass('active'); 
   }); 
   

2. 頁面加載後，找出你是哪個頁面，並設置活躍類各自的標籤

   (function($){ 
       //highlight the current tab 
       var l = window.location.pathname, 
       str = l.slice(l.lastIndexOf('/')+1,l.length); 
   
       $('ul#menu li a.active').removeClass('active');//remove active from home page link 
       $('#menu').find('a[href="'+str+'"]').addClass('active'); 
   })(jQuery); 
   

Answer 2

嘗試單獨使用以下，並取出$('ul#menu li a').removeClass('active');

$('ul#menu li a').click(function(){ 
    $(this).toggleClass('active'); 
}); 

Answer 3

你應該只使用$(this).toggle('active')，你並不需要前面的語句

Answer 4

這適用於我

var url = window.location.href; 
    url = url.substr(url.lastIndexOf("/") + 1); 
    $("#menu").find("a[href='" + url + "']").addClass("active"); 

只是我將腳本排除在每個頁面上，它將添加active類以反映當前位置。無需切換任何東西。

我猜測爲什麼你的代碼不起作用：您點擊一個鏈接和一切可能的工作，除了鏈接指向不同的網頁，你的jQuery函數被「重裝」，並沒有什麼不再點擊。如果你想實現一個頁面的網站看到，例如：

• http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
• http://cmpolis.github.com/Pagify/#about