点击jQuery后添加类到相似的元素

Question

我需要添加类到DIV后点击A具有相同的类。例如

<ul> 
<li><a href="#1" class="test1">1</a></li> 
<li><a href="#2" class="test2">2</a></li> 
<li><a href="#3" class="test3">3</a></li> 
</ul> 
<div class="test"> 
<div class="test1">test1</div> 
<div class="test2">test2</div> 
<div class="test3">test3</div> 
</div> 

如果我在a.test1点击我需要添加类ACTIVE这和div.test1 我做了一个这个简单的代码，但我不知道我应该DIV

做什么

jQuery(document).ready(function() { 
    jQuery('ul li').click(function() { 
     jQuery("li.active").removeClass("active"); 
     jQuery(this).addClass('active'); 
    }); 
}) 

谢谢！

Answer 1

您可以通过匹配点击的li的index来获得相关的div元素。试试这个：

jQuery(document).ready(function($) { 
 
    $('ul li').click(function() { 
 
    var index = $(this).index(); 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
    $('.test div').eq(index).addClass('active').siblings().removeClass('active'); 
 
    }); 
 
})

.active { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#1" class="test1">1</a></li> 
 
    <li><a href="#2" class="test2">2</a></li> 
 
    <li><a href="#3" class="test3">3</a></li> 
 
</ul> 
 
<div class="test"> 
 
    <div class="test1">test1</div> 
 
    <div class="test2">test2</div> 
 
    <div class="test3">test3</div> 
 
</div>

Answer 2

希望下面的代码工作，

jQuery(document).ready(function() { 
    jQuery('ul li').click(function() { 
     jQuery("li.active").removeClass("active"); 
     var divClass = jQuery(this).attr("class"); 
     jQuery(this).addClass('active'); 

     jQuery("div.active").removeClass('active'); 
     jQuery("div."+divClass).addClass('active'); 
    }); 
})