Question

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

如何使用jQuery添加Class和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/

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

Demo

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/

如何使用addClass和removeClass相同的锚点和div ..锚点是单击addClass并且item是addClass活动的

2 个答案: