显示/隐藏嵌套divs的内容

如预期的那样，标签1和标签2显示并隐藏，但嵌套div不显示。如何修改脚本以显示/隐藏Tab 1 div/Tab 2 div和内嵌的div。显示/隐藏嵌套divs的内容

脚本

$(document).ready(function() { 
     $("#content div").hide(); // Initially hide all content 
     $("#vtabs li:first").attr("id", "current"); // Activate first tab 
     $("#content div:first").fadeIn(); // Show first tab content 
     $('#vtabs a').click(function(e) { 
      e.preventDefault(); 
      if ($(this).closest("li").attr("id") == "current") { //detection for current tab 
       return 
      } 
      else { 
       $("#content div").hide(); //Hide all content 
       $("#vtabs li").attr("id", ""); //Reset id's 
       $(this).parent().attr("id", "current"); // Activate this 
       $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab 
      } 
     }); 
    }); 
    (function() { 
     var bsa = document.createElement('script'); 
     bsa.async = true; 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bsa); 
    })();

HTML

<link rel="stylesheet" href="css/tabs3.css" type="text/css" /> 
</head> 
<body> 
    <div id="header">site title</div> 
    <div id="vtabs"> 
     <ul> 
      <li> 
       <a href="#" name="tab1">By Service</a> 
      </li> 
      <li> 
       <a href="#" name="tab2">By Client</a> 
       <br /> 
      </li> 
     </ul> 
    </div> 
    <div id="content"> 
     <div id="tab1">Tab 1 
      <br /> 
      <div>Tab 1 nested div</div> 
     </div> 
     <div id="tab2">Tab 2 
      <br /> 
      <div>Tab 2 nested div</div> 
     </div>

来源

2012-06-30 user1493190

隐藏/显示嵌套div的代码在哪里？ –

有一个在我看到你展示嵌套的div代码没有在那里。我建议你给容器div一个类，称它为tab_contents。像这样

<div id="tab1" class="tab_contents">

然后在这两个地方该行$("#content div").hide();更改为$(".tab_contents").hide();。问题是你隐藏所有div #content，但只能淡化容器div而不是嵌套的div。只隐藏容器div。

来源

2012-06-30 18:15:26 antoniovassell

显示/隐藏嵌套divs的内容

回答

相关问题