javascript - 您如何在单击时删除一个类并将其添加到两个列表元素

Question

如何在单击时按顺序同时为对应的列表项从以下两个列表中删除和添加类。例如，单击第二个列表项，更改发生在另一个列表的第二个列表项上

目前使用下面的方法我只能在任何一次点击时在其中一个 li 标签上发生这种情况

$(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>

非常感谢您的帮助。

Answer 1

因为 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');            
    });
});