单击时需要不同结果的选项卡菜单
Posted
技术标签:
【中文标题】单击时需要不同结果的选项卡菜单【英文标题】：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”实际上也将我带到了注销页面（本示例中未提供），而不是像其他选项卡一样尝试隐藏潜水？
非常感谢
【问题讨论】：
【参考方案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 (...以上是关于单击时需要不同结果的选项卡菜单的主要内容，如果未能解决你的问题，请参考以下文章