Question

我有以下简单的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并隐藏其他div。我确实需要此功能，除非有更好的方法根据单击的选项卡包含不同的内容。如果有更好的方法可以做到这一点我会很高兴，但这可能是一个不同的问题。

我现在的问题： 如果您点击Logout选项卡，我想运行不同的操作。但是我仍然希望该注销选项卡看起来与其他选项卡相同。有没有办法当我点击退出选项卡时，网址“/ logout”实际上也是我的退出页面（在此示例中未提供），而不是像其他标签一样隐藏潜水？

非常感谢

Answer 1

我喜欢完全从click函数中排除logout按钮的想法，并编写自己的处理程序（如@xCRKxTyPHoon所示），但是，如果你想仍然使用那个click函数，并希望能够添加更多以相同的方式链接，而不必为每个都编写单独的处理程序，你可以在click函数的开头添加这样的东西（检查href属性是否有斜杠，如果有，则重定向）：

== undefined

这里有一支笔：http://codepen.io/shigidaMark/pen/YqNWRy

Answer 2

选择器$('.tablist > li > a')会找到嵌套在＆＃39;选项卡列表中的所有锚标记。类对象。此包含您的退出代码<a href="/logout">Logout</a>。这就是您的注销选项卡与其他选项卡一样的原因。

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

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

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

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

从该代码中排除选项卡后，您应该能够单独处理它以使其重定向到您想要的页面。

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

2 个答案: