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