Changing classes in javascript on click

Question

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>

change first line of js to $("a").removeClass('tab-title');

Rahul
– Rahul

2017-06-05 07:27:12 +00:00
Commented Jun 5, 2017 at 7:27 — Rahul
– Rahul, Commented Jun 5, 2017 at 7:27
@mplungjan okay, sorry

user253938
– user253938

2017-06-05 07:32:03 +00:00
Commented Jun 5, 2017 at 7:32 — user253938
– user253938, Commented Jun 5, 2017 at 7:32

rexroxm · Accepted Answer · 2017-06-05 07:32:54Z

4

$(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));
  });
});

answered Jun 5, 2017 at 7:32

rexroxm

8781 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2017-06-05 07:32:05Z

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>

prasanth · Accepted Answer · 2017-06-05 07:31:40Z

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>

Collectives™ on Stack Overflow

Changing classes in javascript on click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related