javascript - 选项卡内容无法正确呈现

Question

我正在使用 easytabs jquery 插件(http://os.alfajango.com/easytabs/)。我写了一个小代码

<div id="tab-container" class="tab-container">
  <ul class='etabs' style="  float:left;white-space: nowrap;padding-left:0px">
    <li class='tab' style="display:inline-block;background-color:#ff0000"><a href="#article-section">Articles</a></li>
    <li class='tab' style="display:inline-block"><a href="#topic-section" style="">Topics</a></li>
    <li class='tab' style="display:inline-block"><a href="#discuss-section">Discussions</a></li>
    <li class='tab' style="display:inline-block"><a href="#question-section">Questions</a></li>
  </ul>
  <div id="article-section">
    <h2>HTML Markup for these tabs</h2>
    <!-- content -->
  </div>
  <div id="topic-section" >
    <h2>JS for these tabs</h2>
    <!-- content -->
  </div>
  <div id="discuss-section">
    <h2>CSS Styles for these tabs</h2>
    <!-- content -->
  </div>
  <div id="question-section">
  <h2> question Section</h2>
  </div>
</div>

javascript代码是

 jQuery(document).ready(function(){
          jQuery('#tab-container').easytabs();});

我用的css是

li { 

 background-color: #FF0000;
height:40px;
padding-left:2%;
padding-right:2%;
}


ul a{ width:100%;
    text-decoration: none;
    color:#FFFFFF;
    font-size:150%;
    line-height: 40px; 

}

列表项正确呈现为选项卡，但内容与列表项重叠请指导如何制作其下面的列表项选项卡。这是屏幕截图。

Answer 1

尝试为 tab-container 中的所有 div 添加样式，如下所示:

.tab-container div {
   float:left;
   clear:both;
   width:100%;
}

或尝试使用 EasyTab 网站的 css 示例:

.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }

希望对您有所帮助!