Добавление класса активным только одним щелчком мыши

Question

Я пытаюсь добавить класс активным, каждый раз, когда вы нажимаете на ссылку, но пока добавляет, только если я дважды щелкнул по нему.

Вот мой HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<div class="content"> 
<ul> 
    <li><a href="#">Deposit</a></li> 
    <li><a href="#">Account</a></li> 
    <li><a href="#">Credit</a></li> 
</ul> 
    <div class="box active" id="deposit"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
    </div> 
    <div class="box" id="account"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
    </div> 
    <div class="box" id="credit"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
    </div> 

</div> 
<div id="random"> 
    <p>This is a random text</p> 
</div> 

CSS:

li{ 
    list-style:none; 
    color: white; 
    width: 30%; 
    a{ 
    color: white; 
    text-decoration: none; 
    &:hover{ 
     color: blue; 
    } 
    } 

} 
ul{ 
    background: black; 
    padding: 20px 0; 
    text-align: center; 
    display: flex; 
    justify-content: center; 
} 
.box{ 
    height: 200px; 
} 
#deposit{ 
    background: green; 
} 
#account{ 
    background: pink; 
} 
#credit{ 
    background: blue; 
} 
li a.active{ 
    color: red; 
} 

JS:

$(document).ready(function(){ 

    $('div.box').hide(); 
    $('li a').on("click", function(){ 

    if(!$('li a').hasClass('active')){ 
     $(this).addClass('active'); 
    } 
    else{ 
     $('li a').removeClass('active'); 
    } 
    }); 
}); 

Вот моя ручка: http://codepen.io/Sidney-Dev/pen/MbyXvP

Как я могу добавить класс активной в го e, когда я нажимаю на него и удаляю тот же класс из любой другой ссылки, если он существует? Надеюсь, вы сможете помочь.

Answer 1

Просто удалите active класс из всех a, а затем добавить active класс щелкнул a как следующее.

$('div.box').hide(); 
$('li a').on("click", function() { 
    $('li a').removeClass('active'); 
    $(this).addClass('active'); 

    $('div.box').hide(); 
    var index = $(this).parent().index(); 
    $('div.box').eq(index).show(); 
}); 

UPDATED CODEPEN

Answer 2

$(document).ready(function(){ 
 
    
 
    $('div.box').hide(); 
 
    $('li a').on("click", function(){ 
 
     $('li a').not($(this)).removeClass('active'); 
 

 
     $(this).toggleClass('active'); 
 
    }); 
 
});

li{ 
 
    list-style:none; 
 
    color: white; 
 
    width: 30%; 
 
    a{ 
 
    color: white; 
 
    text-decoration: none; 
 
    &:hover{ 
 
     color: blue; 
 
    } 
 
    } 
 
    
 
} 
 
ul{ 
 
    background: black; 
 
    padding: 20px 0; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.box{ 
 
    height: 200px; 
 
} 
 
#deposit{ 
 
    background: green; 
 
} 
 
#account{ 
 
    background: pink; 
 
} 
 
#credit{ 
 
    background: blue; 
 
} 
 
li a.active{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="content"> 
 
<ul> 
 
    <li><a href="#">Deposit</a></li> 
 
    <li><a href="#">Account</a></li> 
 
    <li><a href="#">Credit</a></li> 
 
</ul> 
 
    <div class="box active" id="deposit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="account"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="credit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    
 
</div> 
 
<div id="random"> 
 
    <p>This is a random text</p> 
 
</div>

Answer 3

Вы должны изменить только элементы, на которых случились нажмите. Вы могли бы сделать что-то подобное.

$(document).ready(function() { 
 

 
    $('div.box').hide(); 
 
    $('li a').on("click", function(event) { 
 
    let $ele = $(event.target); 
 
    $('li a').not($ele).removeClass('active'); 
 
    $ele.toggleClass('active') 
 
    }); 
 
});

li { 
 
    list-style: none; 
 
    color: white; 
 
    width: 30%; 
 
    a { 
 
    color: white; 
 
    text-decoration: none; 
 
    &: hover { 
 
     color: blue; 
 
    } 
 
    } 
 
} 
 
ul { 
 
    background: black; 
 
    padding: 20px 0; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.box { 
 
    height: 200px; 
 
} 
 
#deposit { 
 
    background: green; 
 
} 
 
#account { 
 
    background: pink; 
 
} 
 
#credit { 
 
    background: blue; 
 
} 
 
li a.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <ul> 
 
    <li><a href="#">Deposit</a> 
 
    </li> 
 
    <li><a href="#">Account</a> 
 
    </li> 
 
    <li><a href="#">Credit</a> 
 
    </li> 
 
    </ul> 
 
    <div class="box active" id="deposit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="account"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="credit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 

 
</div> 
 
<div id="random"> 
 
    <p>This is a random text</p> 
 
</div>

Answer 4

Вы должны удалить существующий класс активного первого затем добавить один и тот же класс на событие щелчка.

$(document).ready(function(){ 
    $('div.box').hide(); 
    $('li a').on("click", function(){ 
     $('li a').removeClass('active'); 
     $(this).addClass('active');  
    }); 
});