html - 使用此代码将内容添加到选项卡。HTML CSS

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>