单击时需要不同结果的选项卡菜单答案

【问题标题】：Tab menu needing different outcomes when clicked单击时需要不同结果的选项卡菜单
【发布时间】：2016-07-03 01:59:57
【问题描述】：

我有以下简单的 html，它有一个带有一些 javascript 的选项卡菜单，用于在单击选项卡时更改内容。

test.html

<!DOCTYPE html>
<html>
<head>
    <title>My Menu Test</title>
    <style type="text/css" media="all">@import "public/stylesheets/master.css";</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script><!--
        $(document).ready(function() {
            $('.tablist > li > a').click(function(event){
                event.preventDefault();//stop browser to take action for clicked anchor

       //get displaying tab content jQuery selector
       var active_tab_selector = $('.tablist > li.active > a').attr('href');                    

       //find actived navigation and remove 'active' css
       var actived_nav = $('.tablist > li.active');
       actived_nav.removeClass('active');

       //add 'active' css into clicked navigation
       $(this).parents('li').addClass('active');

       //hide displaying tab content
       $(active_tab_selector).removeClass('active');
       $(active_tab_selector).addClass('hide');

       //show target tab content
       var target_tab_selector = $(this).attr('href');
       $(target_tab_selector).removeClass('hide');
       $(target_tab_selector).addClass('active');
    });
});
    //--></script>

    </head>
    <body>
    <div id="page-container">
    <div id="main-nav">
        <ul class="tablist">
            <li class="active"><a href="#tab1">Tab1</a></li>
            <li><a href="#tab2">Tab2</a></li>
            <li><a href="#tab3">Tab3</a></li>
            <li><a href="/logout">Logout</a></li>
        </ul>
    </div>
    <div id="content">
        <section id="tab1" class="tab-content active">
            <div>
                Content for Tab1 
            </div>
        </section>
        <section id="tab2" class="tab-content hide">
            <div>
                Content for Tab2
            </div>
        </section>
        <section id="tab3" class="tab-content hide">
            <div>
                Content for Tab3
            </div>
        </section>
    </div>
    </div>
    </body>
</html>

master.css

.tablist { list-style: none; height: 30px; padding: 0; margin: 0; border: none; }
.tablist li { float:left; margin-right: 3px; }
.tablist li a { display:block; padding:0 16px; text-decoration:none; border: 1px solid #babdb6; border-bottom:0; font:bold 14px/32px arial,geneva,helvetica,sans-serif; color:#000; background-color:#ccc;

/*===  CSS 3 elements  ===*/
webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

.tablist li a:hover { background:#babdb6; color:#fff; text-decoration:none; }


.tablist > .active > a,
.tablist > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; }

.tab-content.active{ display: block; }

.tab-content.hide{ display: none; }

当我单击 Tab1、Tab2 或 Tab3 时，我会显示相关的 div，而其他的则被隐藏。我确实想要这个功能，除非有更好的方法可以根据单击的选项卡包含不同的内容。如果有更好的方法可以做到这一点，我将不胜感激，但这可能是针对不同的问题。

我现在的问题： 如果您愿意，我想在单击“注销”选项卡时执行不同的操作。但是，我仍然希望该注销选项卡看起来与其他选项卡相同。有没有一种方法，当我单击注销选项卡时，url“/logout”实际上也将我带到了注销页面（本示例中未提供），而不是像其他选项卡一样尝试隐藏潜水？

非常感谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我喜欢从 click 函数中完全排除注销按钮的想法，并编写自己的处理程序（如 @xCRKxTyPHoon 所示），但是，如果您希望仍然使用该 click 函数，并且希望能够添加更多以相同的方式链接，无需为每个链接编写单独的处理程序，您可以在 click 函数的开头添加类似的内容（检查 href 属性是否有斜杠，如果有则重定向）：

if($(this).attr('href').indexOf('/') !== -1){
  window.location = $(this).attr('href');
}

这是一支笔，里面有那个：http://codepen.io/shigidaMark/pen/YqNWRy

【讨论】：

另一个好建议。也谢谢你....很高兴看到它在运行。抱歉，我还不能投票。

【解决方案2】：

选择器$('.tablist > li > a') 将查找嵌套在“tablist”类对象中的所有锚标记。这包括您的注销标签<a href="/logout">Logout</a>。这就是为什么您的注销选项卡与其他选项卡一样。

有几种方法可以从该循环中排除注销选项卡。我想到的最简单的方法是给锚一个 ID 并使用 :not 选择器：

<a id="logout" href="/logout">Logout</a>

您的新循环选择器如下所示：

$('.tablist > li > a').not('#logout')

一旦您从该代码中排除标签，您应该能够单独处理它以使其重定向到您想要的页面。

【讨论】：

啊，我希望我能投票。这很有意义。谢谢你。我等不及要测试了。我假设我可以做类似的事情。 $('.table > li > a').not ('#logout').click (...