如何在點擊時移除並添加一個類到兩個列表元素

如何在點擊順序中同時爲線程列表項目移除和添加一個類到下面的列表。例如，單擊第二個列表項和其他列表如何在點擊時移除並添加一個類到兩個列表元素

目前在第二列表項發生改變使用下面的我只能拿這個來的李標籤中的一個發生在任何一個點擊

$(document).ready(function() { 

    $("ul.control li, ul.markers li").click(function() { 
     $("ul.control li").removeClass("active"); 
     $(this).addClass("active"); 
     $("ul.markers li").removeClass("active"); 
     $(this).addClass("active"); 

});

下面是兩個列表

<ul id="tabs" class="control"> 
    <li class="active"><a href="#tab1">Tab1</a></li> 
    <li><a href="#tab2">Tab2</a></li> 
    <li><a href="#tab3">Tab3</a></li> 
    <li><a href="#tab4">Tab4</a></li> 
</ul> 


<ul id="tabs" class="markers"> 
    <li class="active">1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul>

非常感謝提前任何幫助的標記。

來源

2011-08-18 rogersoli

因爲jQuery是一種足以暴露index function，你可以考慮一下：

所有的

$(document).ready(function() 
{  
    $("ul.control li, ul.markers li").click(function() 
    { 
     var index = $(this).index();  
     $("ul.control li").removeClass("active"); 
     $("ul.markers li").removeClass("active"); 
     $("ul.control li:eq("+index+")").addClass('active');  
     $("ul.markers li:eq("+index+")").addClass('active');    
    }); 
});

來源

2011-08-18 14:25:03

感謝這個完美工作。 – rogersoli

首先，標識必須是唯一的。所以在你的情況下，我會將id「標籤」「轉換」爲CSS類。

但現在你的問題。這是我會怎麼解決這個問題：

$(function() { 
    var lists = $(".control, .markers"); 

    lists.click(function(ev) { 
     var el = (ev.srcElement.nodeName === "LI" ? ev.srcElement : ev.srcElement.parentNode); 
     $(".active",lists).removeClass("active"); 
     $("li:eq(" + $(el).index() + ")", lists).addClass("active"); 
    }); 
});

example on jsfiddle.net

來源

2011-08-18 14:29:10 Andreas

很多簡單的解決方案：

$(document).ready(function() { 

    $("ul.control li, ul.markers li").click(function(e) { 
    var that = $(this); 
     that.siblings('.active').removeClass('active'); 
     that.addClass('active'); 
    }); 

});

演示：http://jsfiddle.net/wesbos/mjmJH/2/

來源

2011-08-18 14:33:16 wesbos

如何在點擊時移除並添加一個類到兩個列表元素

回答

相關問題