jquery - 如何使用 addClass 和 removeClass 相同的 anchor 和 div .. anchor 是单击 addClass 并且元素是 addClass 事件

Question

如何使用 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");
    });  
});

http://jsfiddle.net/aungnyeinmin/D7wab/

Answer 1

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

Demo