Якорная ссылка Toggle Class - PullRequest
Новая
       12

Якорная ссылка Toggle Class

0 голосов
/ 18 марта 2019

У меня есть меню, которое выглядит так: 

<div id="nav">
    <ul>
        <li class="active"><a href="#home" onclick="closeNav();">Home</a></li>
        <li><a href="#about" onclick="closeNav();">About</a></li>
        <li><a href="#products" onclick="closeNav();">Products</a></li>
        <li><a href="#portfolio" onclick="closeNav();">Portfolio</a></li>
        <li><a href="#howitworks" onclick="closeNav();">How it Works</a></li>
        <li><a href="#contact" onclick="closeNav();">Contact</a></li>
    </ul>
</div>


Что я хотел бы сделать, так это установить home в качестве класса по умолчанию, а затем, когда будет выбрана другая ссылка, активный класс будет удален из дома и добавлен в выбранную якорную ссылку.

Я думал, что смогу сделать это с помощью jQuery toggleClass, но активный класс остается дома, и тогда каждая ссылка получает класс active. 

$("#nav li").click(function(){
    $("a").toggleClass("active");
});

Я не уверен, правильно ли я использую это, но оно определенно не работает так, как я ожидал.

пример: https://jsfiddle.net/0tgzfm7b/

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Вот как переключать LI 

$("#nav li").click(function(e) {
  e.preventDefault();
  $("#nav li").removeClass("active");
  $(this).closest("li").addClass("active");
  // here you can close the divs and open the one belonging to the clicked one
});
.active { background-color: yellow }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#howitworks">How it Works</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>
0 голосов
/ 18 марта 2019

В обратном вызове прослушивателя событий вы можете указать параметр, который сам будет этим событием. Это событие является объектом, содержащим ссылку на выбранный элемент с именем «currentTarget», вы можете использовать эту ссылку для взаимодействия с элементом, вызвавшим событие. 

$("#nav li").click(function(event){
    $("#nav li").removeClass("active");
    $(event.currentTarget).addClass("active");
});
...