Chuyển đổi lớp tích cực trong thanh nav với JQuery

Question

<ul> 
       <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li> 
       <li id="tabCMDS" ><a href="@Href("~/CMDS")">CMDS</a></li> 
       <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li> 
       <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li> 
      </ul> 

Vì vậy, tôi muốn liên kết với click của mỗi trong số những Id, và thiết lập class="active" trên một trong đó được nhấp, và loại bỏ nó từ tất cả những người khác.

Tôi có thể làm phần đầu tiên, nhưng làm cách nào tôi có thể thực hiện việc sau?

Answer 1

$(function() { 
    $("li").click(function() { 
     // remove classes from all 
     $("li").removeClass("active"); 
     // add class to the one we clicked 
     $(this).addClass("active"); 
    }); 
}); 

Nó sẽ là khôn ngoan để giảng dạy cho học có ý nghĩa cho <li> 's, do đó bạn đúng cách có thể chọn chỉ những người, nhưng bạn sẽ có được ý tưởng.

Answer 2

Cung cấp cho ul một id hoặc lớp và chọn tắt nó.

<ul id = "nav">... 

var $navItems = $('#nav > li'); 
$navItems.click(function(){ 
    $navItems.removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

$("ul li").click(function() 
{ 
$("ul .active").removeClass("active"); 
$(this).addClass("active"); 
}); 

Answer 4

Bạn có thể làm:

$('li').click(function(e){ 
    e.preventDefault(); 
    $(this).addClass('active'); 
    $(this).siblings().each(function(){ 
     $(this).removeClass('active') ; 

    }); 
}); 

fiddle đây http://jsfiddle.net/UVyKe/1/

Answer 5

Không cần phải ràng buộc một sự kiện click cho mỗi ID nhưng thay vì liên kết với tất cả các mục danh sách các danh sách không có thứ tự này. Sau đó sử dụng các phương thức .parent(). Children(). Sau nên làm việc:

$('ul li').click(function(){ 
    $(this).addClass('active'); 
    $(this).parent().children('li').not(this).removeClass('active'); 
}); 

Answer 6

Có thể bạn sẽ tìm thấy điều này tốt hơn (nếu không trang sẽ nhảy) -

$(function() { 
$("li").click(function() { 
    // remove classes from all 
    $("li").removeClass("active"); 
    // add class to the one we clicked 
    $(this).addClass("active"); 
    // stop the page from jumping to the top 
    return false; 
}); 
}); 

Answer 7

Bạn có thể thêm lớp hoạt động sử dụng dưới đường duy nhất mà không sử dụng bất kỳ sự kiện

$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 

link to refer