如何在 Jquery 的选项卡中包含选项卡..

How can I include tabs inside a tab in Jquery ...?

本文关键字：选项 包含 Jquery      更新时间：2023-09-26

这是我的代码，我基本上想有上父标签，但是一旦你点击一个标签，点击的标签中就会有子标签，这样你就可以在父标签中查看不同标签的不同内容。当我单击不同的父选项卡时，它们会显示，但是当我单击子选项卡时，子选项卡菜单消失了，我看不到任何东西..谁能告诉我我哪里出错了？

<!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 > div元素执行fadeOut，从而有效地隐藏所有父选项卡及其所有内容。

幸运的是，修复似乎很容易：

$('#tabs > ul li a').click(function(){

这是工作小提琴。

相关文章：