jQuery addClass example

Change class name on click in jQuery

by Taras Pyatyhorskyy

HTML

<div class="container">
<div class="divs">
<div class="one all_div none">One</div>
<div class="two all_div">Two</div>
<div class="three all_div none">three</div>
<div class="five all_div none">four</div>
<div class="six all_div none">five</div>
<div class="seven all_div none">six</div>
<div class="eight all_div none">seven</div>
<div class="nine all_div none">eight</div>
</div>




  <ul>
  <li class="btn_one active"><a href="#" class="btn">1</a></li>
    <li class="btn_two"><a href="#" class="btn active">2</a></li>
    <li class="btn_three"><a href="#" class="btn">3</a></li>
    <li class="btn_four"><a href="#" class="btn">4</a></li>
    <li class="btn_five"><a href="#" class="btn">...</a></li>
    <li class="btn_six none"><a href="#" class="btn">5</a></li>
    <li class="btn_seven none"><a href="#" class="btn">6</a></li>
    <li class="btn_eight none"><a href="#" class="btn">7</a></li>
   <li class="btn_nine"><a href="#" class="btn">8</a></li>
  </ul>
</div>

CSS

a {
  text-decoration: none;
}
.active {
  color: red;
  font-size: 20px;
}
.container {
  display: inline-flex;}

ul {
  display: inline-flex;
  margin-top:  50px;
  margin-left: 0px;
}
li {
  margin-left: 20px;
}
.none {
  display: none;
}
.flex {
  display: flex;
}

JavaScript

$(".btn").click(function(){
 $(".btn").removeClass('active');
 $(this).toggleClass('active'); 
});
var text = $(".all_div");
$(".btn_two").click(function() {
  $("div.two , .btn_five").removeClass('none');
  $("div.one , div.three , .btn_six , .btn_seven , .btn_eight").addClass('none');
});
$(".btn_three").click(function() {
  $("div.two , .btn_six , .btn_seven , .btn_eight, div.three").removeClass('none');
  $("div.one , div.two , .btn_five").addClass('none');
});
$(".btn_one").click(function() {
  $("div.one , .btn_five").removeClass('none');
  $("div.two , .btn_six , .btn_seven , .btn_eight").addClass('none');
});