Javascript 如何在Jquery中的选项卡中包含选项卡。。。？
这是我的代码，我希望基本上有上层的父选项卡，但是一旦你点击一个选项卡，在点击的选项卡中就会有子选项卡，这样你就可以在父选项卡中查看不同选项卡的不同内容。。当我单击不同的父选项卡时，它们会显示，但当我单击子选项卡时，子选项卡菜单会消失，我什么也看不到。。谁能告诉我哪里出了问题Javascript 如何在Jquery中的选项卡中包含选项卡。。。？,javascript,jquery,tabs,jquery-tabs,Javascript,Jquery,Tabs,Jquery Tabs,这是我的代码，我希望基本上有上层的父选项卡，但是一旦你点击一个选项卡，在点击的选项卡中就会有子选项卡，这样你就可以在父选项卡中查看不同选项卡的不同内容。。当我单击不同的父选项卡时，它们会显示，但当我单击子选项卡时，子选项卡菜单会消失，我什么也看不到。。谁能告诉我哪里出了问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran
<!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>
问题就在眼前
$('#tabs ul li a').click(function(){
$('#tabs > ul li a').click(function(){