我有两组HTML元素。第2组中每个元素的字体颜色自动从一个跳到另一个。现在,我希望它与第1组同步,该组是静态的,需要随着组2的幻灯片而更改。
每当我点击组1中的元素时,我希望组2中的元素也发生变化。
.active {
color: red;
}
<h2>Group 1</h2>
<ul id="group-1">
<li class="active">Trigar 1</li>
<li>Trigar 2</li>
<li>Trigar 3</li>
<li>Trigar 4</li>
<li>Trigar 5</li>
</ul>
<h2>Group 2</h2>
<ul id="group-2">
<li class="active">Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
http://jsfiddle.net/17sz2cv2/1/
当#group-1中的活动元素已设置时触发此:
$("#group-1").children("li").each(function(index){
if($(this).hasClass("active")) {
$("#group-2 li:nth-child("+(index+1)+")").addClass("active");
}
});
另请参阅http://jsfiddle.net/17sz2cv2/4/