Добавить/удалить класс nav ul li с помощью jQuery, щелкнув href внутри li

Question

У меня есть настройка списка навигации, чтобы показывать/скрывать вкладки, которые работают правильно. Теперь я пытаюсь добавить/удалить активный класс элемента nav ul li только при нажатии на текст href. В настоящее время, когда вы нажимаете элемент списка (пробел вокруг текста, а не только текст), отображается активный класс. Таким образом, активный класс отображается без нажатия ссылки и изменения вкладок.

Я пробовал много вариантов, чтобы достичь этого, без результата.

<script> 
    $(function(){ 
    $('#tabs li').click(function() { 
    //Removes the active class from any <li> elements 
    $('li.active').removeClass('active'); 
    //Adds it to the current element 
    $(this).addClass('active'); 
    }); 
    }); 
</script> 

HTML

<div class="warranty-nav"> 
    <ul id="tabs" class="nav"> 
    <li class="active"><a href="#overview">Overview</a></li> 
    <li class=""><a href="#benefits">Plan Benefits</a></li> 
    <li class=""><a href="#works">How It Works</a></li> 
    <li class=""><a href="#terms">Terms and Conditions</a></li> 
    <li class=""><a href="#faqs">Frequently Asked Questions</a></li> 
    </ul> 
</div> 

Спасибо заранее.

Answer 1

попробовать это:

$('#tabs a').click(function() { 
    //Removes the active class from any <li> elements 
    $('#tabs li.active').removeClass('active'); 
    //Adds it to the current element 
    $(this).parent('li').addClass('active'); 
    }); 

Answer 2

$(function(){ 
    $('#tabs li').click(function() { 
    //Removes the active class from any <li> elements 
    $(this).siblings().removeClass('active'); 
    //Adds it to the current element 
    $(this).addClass('active'); 
}); 
    }); 

• Удалить класс братьев

Answer 3

Вы код работает, нужно просто закрыть вы действуете.

<script> 
    $(function(){ 
    $('#tabs li').click(function() { 
    //Removes the active class from any <li> elements 
    $('li.active').removeClass('active'); 
    //Adds it to the current element 
    $(this).addClass('active'); 
    })}); 
</script>