带有切换按钮的菜单栏

发布于 2024-11-05 07:29:33 字数 590 浏览 1 评论 0原文

我四处寻找解决方案，但找不到。

我想要一个带有 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>

原文

I have looked around for a solution but I can't find one.

I want to have a nav bar with 4 buttons using <li>. I need each button to have an active state when clicked without reloading the page. If the user presses a button all other buttons should be un-active and the one clicked active. One button(all) will need to be active as default when the page is loaded.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

话少心凉 2024-11-12 07:29:33

您几乎可以像重新加载页面一样进行操作。

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
   });

工作示例：点击这里

You can do it almost the same way like when you are reloading the page.

1) Use "active" class for the active button (styled by CSS as you need)
2) On button click remove active class from other buttons and add it to the clicked button

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
   });

Working example: Click here

回复收藏 0 原文

再可℃爱ぅ一点好了 2024-11-12 07:29:33

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

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

回复收藏 0 原文

~没有更多了~