2012-03-13 35 views
9

đây là html:jQuery thêm lớp để li hiện và loại bỏ trước li khi nhấp chuột bên li một

<ul>  
    <li class="current"><a href="#">menu item</a></li> 
    <li><a href="#aba">menu item</a></li> 
    <li><a href="#abb">menu item</a></li> 
    <li><a href="#abc">menu item</a></li> 
    <li><a href="#abd">menu item</a></li> 
</ul> 

nếu tôi nhấn liên kết 'a' nó sẽ addClass 'hiện tại' để li nhấp và loại bỏ lớp li cũ ? đây là cố gắng của tôi:

$('ul li a').click(function(){ 
    $('ul li').removeClass('current'); 
    ... don't know here (add class to current li) ... 
}); 
+0

jQuery có tài liệu tuyệt vời mà là đáng đọc: http://api.jquery.com/category/traversing/ –

+0

nvm nhận nó nhờ Rob – test

Trả lời

29

Sử dụng .parent('li') hoặc .closest('li') để chọn nhấp <li>.

$('ul li a').click(function() { 
    $('ul li.current').removeClass('current'); 
    $(this).closest('li').addClass('current'); 
}); 
+0

nhờ làm việc tốt – test

0

Chỉ cần thêm lớp để this như vậy ...

$(this).addClass('yourClass'); 
+1

'this' là phần tử ''. –

6

Sử dụng trên (nghe tiếng 'click') nếu bạn đang sử dụng phiên bản mới nhất của jquery

$('ul li a').on('click', function(){ 
    $(this).parent().addClass('current').siblings().removeClass('current'); 
}); 

Một fiddle là here.

2

Rob là đúng nhưng $('ul li.current').removeClass('current'); không hoạt động đối với tôi. Mã sau hoạt động.

jQuery('ul li a').click(function() 
{ 

jQuery('ul').children().removeClass('selected'); 
jQuery(this).closest('li').addClass('selected'); 

}

Các vấn đề liên quan