如何在单击链接时为同一锚点和div元素同时添加和删除类？单击链接将添加类addClass，项目将添加类active。

Question

如何使用锚点点击addClass和项目addClass一对一？

如何使用jQuery添加类和removeClass以及JavaScript？

一个锚点活动状态 == 1个项目活动状态

两个锚点活动状态 == 2个项目活动状态

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

- aungnyeinmin

---

这个 jsfiddle 是你所指的吗？ - user3559349

Answer 1

使用.index()方法查找被点击的锚点，使用该索引选择相应的下方项目。

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

演示

- Ja͢ck

Answer 2

试一下这个...

$(document).ready(function(){
        $(".itemlabel a").on("click" ,function(){
            $(this).addClass("active").siblings().removeClass("active");
            //how use itemdown scroll jquery
            $($($(this).attr('href')).parents('.item')[0]).addClass("active").siblings().removeClass("active");
            return false;
        });
    });

http://jsfiddle.net/kka284556/D7wab/3/

- K.K.Agarwal

---

这是你想要的吗？ - K.K.Agarwal