Библиотека jQuery добавление класса прикладного, но зачеркнутый через инструменты разработчика

---

Я использовал jQuery, чтобы удалить класс(.active) из ссылки, а затем добавить этот класс во вторую ссылку. Класс применяется к элементу следующим образом

<li><a class="active">

но в средства разработки это зачеркнутый через ( .активный {цвет: красный;} ) и класс применяет цвет к тексту элемента только после того, как я щелкаю в другом месте страницы, как если бы это был сфокусированный элемент.

скрипт:

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-код

<ul>
  
    <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>

</ul>

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

Что я уже пробовал:

Я пробовал вставить "это" в селектор вместо "ul li a", но это дает тот же результат. Я также пробовал некоторые варианты размещения линий в другом порядке, но это дает еще худший результат. Когда я нахожусь на панели инструментов разработчика, она показывает, что классы применяются правильно, но они зачеркнуты на панели, и они отображаются только тогда, когда я нажимаю в другом месте. Пожалуйста, помогите мне.

---