Question

我对HTML和CSS相当陌生，我对标签感到好奇，最近我在一段时间之前遇到过这段代码，我想知道如何在其他标签中添加一些内容。

这是代码

<style>
 #content
{
   background-color: #f2f2f2;
   padding: 20px 10px;
   overflow: auto;
}
#tab-container
{
   float: left;
   margin: 50px 0 0 0;
   width: 126px;
}
#tab-container ul
{
   list-style: none;
   text-align: center;
}
#tab-container ul li
{
   border-top: 1px solid #666;
   border-right: 1px solid #666;
   border-bottom: 1px solid #666;
   border-left: 8px solid #666;
   background-color: #ddd;
   margin: 8px 0;
}
#tab-container ul li a,
#tab-container ul li a:visited
{
   text-decoration: none;
   color: #666;
   display: block;
   padding: 15px 5px;
}
#tab-container ul li:hover
{
   border-left: 8px solid #333;
}
#tab-container ul li a:hover
{
   color: #000;
}
#tab-container ul li.selected
{
   border-right: none;
   background-color: #fff;
   border-left: 8px solid #006699;
}
#main-container
{
   min-height: 400px;
   margin: 0 0 0 125px;
   padding: 20px;
   background-color: #fff;
   border: 1px solid #888;
}
 </style>
  <div id="content">
   <div id="tab-container">
      <ul>
         <li class="selected"><a href="">Tab 1</a></li>
         <li><a href="">Tab 2</a></li>
         <li><a href="">Tab 3</a></li>
         <li><a href="">Tab 4</a></li>
      </ul>
   </div>
   <div id="main-container">
      <h1>Put your content here...</h1>
   </div>
</div

那么如何将内容添加到其他标签中？感谢。

Answer 1

使用类似的东西，并使用bootstrap它将工作你可以在这里看到这个例子： http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

<ul class="nav nav-tabs">
 <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
 <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
 <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
   <h3>Menu 1</h3>
   <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
   <h3>Menu 2</h3>
   <p>Some content in menu 2.</p>
  </div>
</div>

Answer 2

您可以为每个标签创建不同的类，如下所示： main_container.Tab1 { visibility: vissible } main_containber.Tab2 { visibility: hidden }

使用JavaScript onClick函数更改该属性并显示正确的信息。

每个类都有不同的div，分别是tab的数量

使用此代码向选项卡添加内容.HTML CSS

2 个答案: