Click here to Skip to main content
14,486,704 members
Rate this:
Please Sign up or sign in to vote.
See more:
I used jQuery to remove a class(.active) from a link and then add that class to the second link. The class gets applied to the element like
<li><a class="active">
but in dev tools it is striked through ( .active {color: red;} ) and the class only applies the color to the element text once I click elsewhere in the page as if it were a focussed element.

the script:
jQuery(document).ready( function($){
     // code for loading content as content.load() this code works fine

    // below is the code to add the class to the default link
	$('ul li.nav-item a[href="linkid"]').addClass('active');

    // below here is the click handler for the links
	$('ul li.nav-item a').click(function(){
		var content = $(this).attr('href');
		$('#elementid').load('/folder/urltocontent/' + content + '.txt');
    // then below the code to remove/add the class once another link is clicked
		$('ul li.nav-item a').removeClass('active');
		$('ul li.nav-item a[href="' + content + '"]').addClass('active');
		return false;

html code
    <li class="nav-item"><a href="home">Home</a></li>
    <li class="nav-item"><a href="about">About</a></li>
    <li class="nav-item"><a href="portfolio">Portfolio</a></li>
    <li class="nav-item"><a href="contact">Contact</a></li>


<div id="elementid"></div>

What I have tried:

I've tried putting "this" in the selector instead of the "ul li a" kind of thing but it gives the same result. I've also tried some variations of placing the lines in different order but that's giving an even worse result. When I am in the dev tools panel it shows the classes being applied correctly but they are striked through in the panel and they only show when I click anywhere else. Please help me.
Updated 3 days ago

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

We can't see your CSS, but if the property is struck out, that means you have another rule applied to the element which overrides it.

Use the "computed style" tab in dev tools to see the actual value of the color property. You should be able to expand it to see the list of applicable rules, which should tell you what's overriding your active style.

Computed Style Pane - Chrome[^]
Examine computed CSS - Firefox[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100