如何在Jquery的选项卡中包含选项卡.？
如何在Jquery的选项卡中包含选项卡.？
提问于 2013-11-12 19:21:17
这是我的代码，我想基本上有上父选项卡，但是一旦您单击一个选项卡，单击的选项卡中就会有子选项卡，这样您就可以在父选项卡中查看不同选项卡的不同内容。当我单击不同的父选项卡时，它们会显示，但当我单击子选项卡时，子选项卡菜单就会消失，而我看不到任何东西。有人能告诉我哪里出了问题吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#tabs > div').hide();
$('#tabs div:first').fadeIn('slow');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li.active').removeClass('active'); // <== Only what you need
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs > div').fadeOut('slow', function() { // <== Use a callback
$(selectedTab).delay(10).fadeIn('fast'); // <== add a delay
});
return false;
});
// Video Feeds subcategories
$('#tabs-video-feeds > div').hide();
$('#tabs-video-feeds div:first').fadeIn('slow');
$('#tabs-video-feeds ul li:first').addClass('active');
$('#tabs-video-feeds ul li a').click(function(){
$('#tabs-video-feeds ul li.active').removeClass('active'); // <== Only what you need
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs-video-feeds > div').fadeOut('slow', function() { // <== Use a callback
$(selectedTab).delay(10).fadeIn('fast'); // <== add a delay
});
return false;
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Public Figures</a></li>
<li><a href="#tabs-2"> My Feeds </a></li>
<li><a href="#tabs-3">Videos</a></li>
<li><a href="#tabs-4"> Music </a></li>
<li><a href="#tabs-5">Pictures</a></li>
<li><a href="#tabs-6"> Infographics </a></li>
</ul>
<!-- Start of First tab -->
<div id="tabs-1">
First Parent tab
</div>
<!-- Start of Second tab -->
<div id="tabs-2">
Second parent tab content
</div> <!-- end of second tab -->
<div id="tabs-3">
Third parent tab .. Below are 3 subtabs .. the subtabs menu and the content ..
<div id="tabs-video-feeds">
<ul>
<li><a href="#tabs-10"> Comedy</a></li>
<li><a href="#tabs-11"> Music </a></li>
<li><a href="#tabs-12"> Politics </a></li>
</ul>
<div id="tabs-10"> Comedy ..</div>
<div id="tabs-11"> Music ..</div>
<div id="tabs-12"> Comedy..</div>
</div>
</div> -- end of third parent tab
<div id="tabs-4"> 4 parent tab content </div>
<div id="tabs-5"> 5 parent tab content</div>
<div id="tabs-6"> 6 parent tab content </div>
</div> <!-- End div of tabs -->
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-12 19:51:34
问题就在眼前
$('#tabs ul li a').click(function(){它同时针对父选项卡和子选项卡，而不是仅针对父选项卡。当发生单击子选项卡时，对所有fadeOut元素执行fadeOut，有效地隐藏所有父选项卡及其所有内容。
幸运的是，修复似乎相当容易：
$('#tabs > ul li a').click(function(){这是工作的小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19938045
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号