CODEWITHSUNDEEP
javascripthtml
user253938
user253938

Reputation: 172

Changing classes in javascript on click

I have this side bar with a bunch of <a href> linked to the same page

I have this JS code, but the previous <a href> link does not change back to tab-title and remains active

I would want it so that when the user clicks a link, the <a href> would change from class="tab-title" to class="tab-title-active"

$(document).ready(function() {
  $('a').click(function() {
    $(this).removeClass('tab-title');
    $(this).addClass('tab-title-active');
    $(this).siblings().removeClass('tab-title-active');
    $(this).siblings().addClass('tab-title');
    console.log($(this).attr("class"));
  });
});
a.tab-title{
    font-size: 18px;
    font-weight: 400;
    list-style: none;
    color: #444;
    margin-top: 10px;
}

a.tab-title-active{
    font-size: 18px;
    font-weight: bold;
    list-style: none;
    color: #0091e4;
    margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
  <div class="tab">
    <h5><a href="#tab-title-0" class="tab-title-active">Binary</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-1" class="tab-title">About</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-2" class="tab-title">Representation</a></h5>
  </div>
</div>

<div class="content">
  <h1 class="tab-title" id="tab-title-0">Binary</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-1">About</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-2">Representation</h1>
  <p>
    <!-- stuff written -->
  </p>
</div>

Upvotes: 0

Views: 65

Answers (3)

rexroxm
rexroxm

Reputation: 878

$(document).ready(function() {
  $('a').click(function() {
    $('a').removeClass('tab-title-active');//this would remove active class from previous hyperlinks and the remaining code will apply the same
    $(this).removeClass('tab-title');
    $(this).addClass('tab-title-active');
    $(this).siblings().removeClass('tab-title-active');
    $(this).siblings().addClass('tab-title');
    console.log($(this));
  });
});

Upvotes: 4

brk
brk

Reputation: 50291

Remove the class tab-title-active from all anchor tags then add it back on the current target

$(document).ready(function() {
  $('a').click(function() {
    // removing the class from element which have this class
    $('.tab-title-active').removeClass('tab-title-active');
    // adding it to the selected element
    $(this).addClass('tab-title-active')

  });
});
.tab-title {
  color: green
}

.tab-title-active {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
  <div class="tab">
    <h5><a href="#tab-title-0" class="tab-title tab-title-active">Binary</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-1" class="tab-title">About</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-2" class="tab-title">Representation</a></h5>
  </div>
</div>

<div class="content">
  <h1 class="tab-title" id="tab-title-0">Binary</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-1">About</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-2">Representation</h1>
  <p>
    <!-- stuff written -->
  </p>
</div>

Upvotes: 1

prasanth
prasanth

Reputation: 22490

You need change All a tag classname .tab-title-active to tab-title.Then add a class with this classname with .tab-title-active

Working snippet 

$(document).ready(function() {
  $('a').click(function() {
    $('a').removeClass('tab-title-active').addClass('tab-title');
    $(this).addClass('tab-title-active');
    console.log($(this).attr('class'));
  });
});
a.tab-title {
  font-size: 18px;
  font-weight: 400;
  list-style: none;
  color: #444;
  margin-top: 10px;
}

a.tab-title-active {
  font-size: 18px;
  font-weight: bold;
  list-style: none;
  color: #0091e4;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="sidebar" style="position: fixed;">
  <div class="tab">
    <h5><a href="#tab-title-0" class="tab-title-active">Binary</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-1" class="tab-title">About</a></h5>
  </div>
  <div class="tab">
    <h5><a href="#tab-title-2" class="tab-title">Representation</a></h5>
  </div>
</div>

<div class="content">
  <h1 class="tab-title" id="tab-title-0">Binary</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-1">About</h1>
  <p>
    <!-- stuff written -->
  </p>

  <h1 class="tab-title" id="tab-title-2">Representation</h1>
  <p>
    <!-- stuff written -->
  </p>
</div>

Upvotes: 1

Related Questions