строка меню с переключающими кнопками

#javascript #jquery #navigation

#javascript #jquery #навигация

Вопрос:

Я огляделся в поисках решения, но не могу его найти.

Я хочу иметь навигационную панель с использованием 4 кнопок <li> . Мне нужно, чтобы каждая кнопка имела активное состояние при нажатии без перезагрузки страницы. Если пользователь нажимает кнопку, все остальные кнопки должны быть неактивными, а та, на которую нажали, активной. Одна кнопка (все) должна быть активна по умолчанию при загрузке страницы.

 <ul id="filtering-nav">
    <li><a class="work"><div>Work</div></a></li>
    <li><a class="like"><div>Like</div></a></li>
    <li><a class="news" ><div>News</div></a></li>
    <li><a class="all"><div>All</div></a></li>
</ul>

1. если вы указали тег привязки для изменения курсора, удалите его. разметка li должна быть чем-то простым, например <li class=»work»>Work</li>, если у вас нет других специфических требований.

Ответ №1:

Вы можете сделать это почти таким же образом, как при перезагрузке страницы.

1) Используйте «активный» класс для активной кнопки (стилизованный под CSS, как вам нужно)
2) При нажатии кнопки удалите активный класс из других кнопок и добавьте его к нажатой кнопке

HTML:

 <ul id="filtering-nav">
    <li><a class="work active"><div>Work</div></a></li>
    <li><a class="like"><div>Like</div></a></li>
    <li><a class="news" ><div>News</div></a></li>
    <li><a class="all"><div>All</div></a></li>
</ul>

Javascript:

    var $buttons = $('#filtering-nav a'); //select all buttons
   $buttons.click(function(e){ //on click...
      $buttons.removeClass('active'); //deselect all buttons
      $(this).addClass('active'); //make clicked button active
      e.preventDefault(); //prevent redirection
   });

Рабочий пример: Нажмите здесь

1. 1 очень близко к моему ответу, и поэтому я его не публикую. 🙂 Я добавляю скрипку, которую я создал для демонстрации, если вы не возражаете.

2. @naveen: Спасибо за пример 🙂 Я добавил функцию e.preventDefault и некоторые комментарии к коду.

3. Какая легенда, большое спасибо за всю вашу помощь. хотел бы я знать о вас. Приветствия

Ответ №2:

 <script>
    $(function()
    {
        $('#filtering-nav a').click(function(event){
            $('#filtering-nav a').removeClass('active');
            $(this).addClass('active');
            event.preventDefault();
        });
    });
</script>
<ul id="filtering-nav">
    <li><a class="work active"><div>Work</div></a></li>
    <li><a class="like"><div>Like</div></a></li>
    <li><a class="news"><div>News</div></a></li>
    <li><a class="all"><div>All</div></a></li>
</ul>