Добавить/удалить класс связи с jQuery внутри nav ul li h4

Question

У меня есть ссылка на строки в строке, заключенной в h4 и h4 внутри элемента li и li внутри ul, которая, наконец, вложена в nav элемент.

На данный момент роль (благодаря очень полезному примеру, который я нашел здесь) при нажатии, заключается в изменении содержимого разделов (содержащих изображения и текст).

Что бы я хотел сделать, кроме того, при нажатии ссылки и изменениях содержимого мне нужна ссылка для получения «активного» класса, который имеет белый цвет и некоторые другие атрибуты css.

<script>  
    $(function() { 
    $("#tabs").tabs(); 
    }); 
</script> 

функция, которая меняет местами Контента

<nav id="nav2">  
    <ul class="tabz"> 
    <li><h4><a href="#tabs-1" class="active">Szenario 1</a></h4></li> 
    <li><h4><a href="#tabs-2">Szenario 2</a></h4></li> 
    <li><h4><a href="#tabs-3">Szenario 3</a></h4></li> 
    <li><h4><a href="#tabs-4">Szenario 4</a></h4></li> 
    <li><h4><a href="#tabs-5">Szenario 5</a></h4></li> 
    </ul> 
</nav> 

При загрузке страницы, все отображается корректно. Когда я нажимаю вторую ссылку, я бы хотел, чтобы «активный» класс был удален из первой ссылки и перешел к sencond. (Css активного класса - это только некоторые различия в цвете и границах.)

Спасибо вам большое.

Answer 1

$('[href^="#tabs"]').click(function(e){ 
    $(this).addClass('active').parents('li').siblings().find('a').removeClass('active'); 
}); 

С разметке у вас есть, то щелкнул a элемент не будет иметь никакого брата, но его li родитель будет, так что этот код будет работать, как и ожидалось, смотрите здесь: DEMO

Answer 2

Прикрепите обработчик для тегов anchor с помощью attribute starts с селектором, так как у вас есть href с таким же началом. И используя справочник $(this), установите активный класс и удалите активный класс со всех своих якорных братьев и сестер.

Try,

$('[href^="#tabs"]').click(function(){ 
     $(this).addClass('active'); 
     $(this).closest('.tabz').find('a').not($(this)).removeClass('active'); 
});