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

Answer 2

首先，ID必须是唯一的。因此，在您的情况下，我会将id“tabs”“转换”为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

Answer 3

更简单的解决方案：

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

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

3 个答案: