Question

我已经四处寻找解决方案，但我找不到一个。

我希望使用<li>的4个按钮导航栏。我需要每个按钮在单击时处于活动状态而不重新加载页面。如果用户按下按钮，则所有其他按钮应该是不活动的并且单击活动的按钮。在加载页面时，需要将一个按钮（全部）作为默认值激活。

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

Answer 1

您可以像重新加载页面一样执行此操作。

1）对活动按钮使用“active”类（根据需要用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
   });

工作示例：Click here

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

带切换按钮的菜单栏

2 个答案: