Remove the class of one element and assign it to another using JavaScript

Question

I need to remove the selected class of an <a> and assign it the last <a> instead. Both are nested within individual <li> elements.

Here's an example of the code:

<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

How can I achieve this using JavaScript/jQuery? Please advise.

EDIT:

Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?

EDIT #2:

Thank you so much everyone for the quick response. All your answers were spot on, wish I could mark them all as answers :)

At what point in time do you want this reattribution to occur? Any event's in particular like click/mousedown? — Ryan Brodie
– Ryan Brodie, Commented Oct 20, 2015 at 9:23
This should occur during the page load event. The idea is to show a different active tab on first load. — nouptime
– nouptime, Commented Oct 20, 2015 at 9:29

Tushar · Accepted Answer · 2015-10-20 09:26:30Z

2

To remove class from an element, use removeClass.

To get the last element, use :last selector or last(). To add new class to element use addClass

$('.selected').removeClass('selected');

$('.tabs li:last a').addClass('selected');
// OR
// $('.tabs li').last().children('a').addClass('selected');

.selected {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
  <li class="tab"><a href="#one" class="selected">Home</a>
  </li>
  <li class="tab"><a href="#two">About</a>
  </li>
  <li class="tab"><a href="#three">Profile</a>
  </li>
  <li class="tab"><a href="#four">History</a>
  </li>
  <li class="tab"><a href="#five">The Beginning of V-Cube</a>
  </li>
</ul>

Update

Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?

$('.tabs a[href="#five"]').addClass('selected');

edited Oct 20, 2015 at 9:26

answered Oct 20, 2015 at 9:18

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

Comments

Bhargav Ponnapalli · Accepted Answer · 2015-10-20 09:18:56Z

1

Try this.

$(".tabs li").first().find("a").removeClass("selected");
$(".tabs li").last().find("a").addClass("selected");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

answered Oct 20, 2015 at 9:18

Bhargav Ponnapalli

9,4427 gold badges38 silver badges45 bronze badges

Comments

Sandeep Nayak · Accepted Answer · 2015-10-20 09:24:43Z

1

Try this:

$(document).ready(function(){
   var classname = $(".tabs li:first-child a").attr("class");
   console.log(classname);
   $(".tabs li:last-child a").addClass(classname);
   $(".tabs li:first-child a").removeClass();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

answered Oct 20, 2015 at 9:24

Sandeep Nayak

4,7571 gold badge26 silver badges34 bronze badges

Comments

Francesco · Accepted Answer · 2015-10-20 09:30:52Z

1

it is quite easy also in vanilla JS:

document.querySelector('.selected').classList.remove('selected');

document.querySelector('.tabs li:last a').classList.add('selected');

If you want to use an arbitrary a and select the attribute href then you should use this selector:

a[href="HREFVALUE"]

edited Oct 20, 2015 at 9:30

answered Oct 20, 2015 at 9:25

Francesco

1,4238 silver badges16 bronze badges

Comments

guradio · Accepted Answer · 2015-10-20 09:35:28Z

1

$('.clearfix').find('.selected').removeClass('selected');
$('.clearfix').find('li:last').find('a').addClass('selected');
$("a[href$='five']").addClass('bold');

.selected {
  color: red
}
.bold {
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
  <li class="tab"><a href="#one" class="selected">Home</a>
  </li>
  <li class="tab"><a href="#two">About</a>
  </li>
  <li class="tab"><a href="#three">Profile</a>
  </li>
  <li class="tab"><a href="#four">History</a>
  </li>
  <li class="tab"><a href="#five">The Beginning of V-Cube</a>
  </li>
</ul>

Just use .removeClass() and .addClass()

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

.addClass()

Description: Adds the specified class(es) to each element in the set of matched elements.

edited Oct 20, 2015 at 9:35

answered Oct 20, 2015 at 9:21

guradio

15.6k4 gold badges39 silver badges65 bronze badges

2 Comments

guradio Over a year ago

@Tushar which is better as selector $('.clearfix').find('li:last').find('a') or $('.clearfix').find('li a:last') I will update the answer if necessary

Tushar Over a year ago

I think $('.clearfix').find('li:last').find('a'), the reason is that you'll narrow down the search for a by selecting a single li

Collectives™ on Stack Overflow

Remove the class of one element and assign it to another using JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related