Twitter页面标签Bootstrap：不隐藏标签内容

我试图让页面选项卡式的内容上的推文工作。我有选项卡上的活动类切换标签工作。我已经包含jquery和bootstrap-tabs.js，但下面的代码似乎无法让标签内容隐藏/显示，因为它们应该。任何帮助可能是一个简单的修复，将不胜感激。Twitter页面标签Bootstrap：不隐藏标签内容

<div class="span8"> 
     <ul class="tabs" data-tabs="tabs"> 
      <li class="active"><a href="#2009">2009</a></li> 
      <li><a href="#2010">2010</a></li> 
      <li><a href="#2011">2011</a></li> 
     </ul> 
     <div class="pill-content"> 
      <div class="active" id="2009"> 
       2009 copy 
      </div> 
      <div id="2010"> 
       2010 copy 
      </div> 
      <div id="2011"> 
       2011 copy 
      </div> 

     </div> 
     <script> 
     $(function() { 
      $('.tabs').tabs() 
     }) 
     </script> 
    </div><!-- end span 8 -->

来源

2011-09-30 BryanB

您可以发布您的CSS接头元件（或者标签窗格）？如果这些类正在成功添加，那么您的错误可能出现在您的CSS中。 – Wex

啊你是对的。我想出了我需要设置一个类到禁止显示内容的div，然后当javascript将类切换到活动状态时，在css中显示代码块。我认为这件事已经到位了，但我现在就开始工作了。 – BryanB

自举的例子是不完整的 - 你需要类=“丸窗格”上的ID

<div class="span8"> 
    <ul class="tabs" data-tabs="tabs"> 
     <li class="active"><a href="#2009">2009</a></li> 
     <li><a href="#2010">2010</a></li> 
     <li><a href="#2011">2011</a></li> 
    </ul> 
    <div class="pill-content"> 
     <div class="active pill-pane" id="2009"> 
      2009 copy 
     </div> 
     <div class="pill-pane" id="2010"> 
      2010 copy 
     </div> 
     <div class="pill-pane" id="2011"> 
      2011 copy 
     </div> 

    </div> 
    <script> 
    $(function() { 
     $('.tabs').tabs() 
    }) 
    </script> 
</div><!-- end span 8 -->

来源

2011-12-06 22:17:39 mcintyre321

在我的情况下，我错过了父元素上的class =“tab-content”。 –

class =“tab-content”是问题:-) – chhameed

如果您将内容类设置为class =“tab-content”，那么我认为display：none会正常工作，不需要内联样式。

来源

2011-10-11 01:04:54 malpaso

Twitter页面标签Bootstrap：不隐藏标签内容

回答

相关问题