jQuery addClass & removeClass

Question

Я очень новичок в jQuery. У меня есть 2 div с id = "widget", по умолчанию в div1 есть класс .active. Я хочу удалить этот класс при нажатии на div2 и добавить активный класс в 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 уникальный идентификатор на странице

Так что я изменил их на классы, например, так

<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 удаляет все классы активных из любых элементов с классом виджета 3. Затем он добавляет класс активных к тому, на который был нажат. $(this) просто ссылается на тот, на который был нажат.