jQuery addClass＆amp; removeClass

Question

我是jQuery的新手。我有2个div与id =“widget”，默认情况下有一个.active类到div1。我想在单击div2时删除此类，并将.active类添加到div2。

有我的HTML：

<div class="progress_widget">

    <div id="widget" class="step1 active">
        <h1>1</h1>
        <h3>STEP 1 of 2</h3><h3 class="hide">Choose Heating System<br> for Estimate</h3>
    </div>

    <div class="step2" id="widget">
        <h1>2</h1>
        <h3>STEP 2 of 2</h3><h3 class="hide">Tell us How to Contact <br>You</h3>
    </div>

</div>

请帮助我!!

Answer 1

首先，每页只能有1个唯一ID

所以我把它们改成了类，就像这样

<div class="widget step1 active">
    <h1>1</h1>
    <h3>STEP 1 of 2</h3><h3 class="hide">Choose Heating System<br> for Estimate</h3>
</div>

<div class="step2 widget">
    <h1>2</h1>
    <h3>STEP 2 of 2</h3><h3 class="hide">Tell us How to Contact <br>You</h3>
</div>

然后对于jQuery，只需执行

$('.widget').click(function() {
    $('.widget').removeClass('active');
    $(this).addClass('active');
});

这个jquery代码不仅仅适用于2个div，所以如果您决定使用类小部件添加更多元素，它也适用于那些。

这就是代码的作用。 1.用户单击具有类窗口小部件的元素 2. jquery从具有widget类的任何元素中删除所有活动类 3.然后将活动类添加到单击的类中。 $(this)只是指被点击的那个。