如何使用 anchor 点击 addClass
和元素 addClass
一对一?
如何使用 jQuery add Class 和 removeClass
以及 JavaScript?
one anchor active == 1 item active
two anchors active == 2 item active
<div class="itemlabel">
<a href="#select1">1</a>
<a href="#select2">2</a>
<a href="#select3">3</a>
<a href="#select4">4</a>
<a href="#select5">5</a>
<a href="#select6">6</a>
<a href="#select7">7</a>
<a href="#select8">8</a>
</div>
<div class="item active">
<img src="xx">
<span> teest</span>
<div class="lablecircle" id="select1">1</div>
</div>
<div class="item">
<img src="xx">
<span> teest</span>
<div class="lablecircle" id="select2">2</div>
</div>
<!-- repeat for other items -->
jQuery:
$(document).ready(function(){
$(".itemlabel a").on("click" ,function(){
$(this).addClass("active").siblings().removeClass("active");
});
});
最佳答案
使用.index()
找出点击了哪个 anchor 并使用该索引选择下面的相应元素:
jQuery(function($) {
var $anchors = $('.itemlabel a'),
$items = $('.item');
$anchors.on('click', function() {
var selectedIndex = $anchors.index(this);
$anchors.removeClass('active').eq(selectedIndex).addClass('active');
$items.removeClass('active').eq(selectedIndex).addClass('active');
});
});
关于jquery - 如何使用 addClass 和 removeClass 相同的 anchor 和 div .. anchor 是单击 addClass 并且元素是 addClass 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24341180/