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

我对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

#内容
{
背景色：#F2F2；
填充：20px 10px；
溢出：自动；
}
#标签容器
{
浮动：左；
利润率：50px0；
宽度：126px；
}
#标签容器ul
{
列表样式：无；
文本对齐：居中；
}
#标签容器ulli
{
边框顶部：1px实心#666；
右边框：1px实心#666；
边框底部：1px实心#666；
左边框：8px实心#666；
背景色：#ddd；
利润率：8px0；
}
#标签容器ul li a，
#标签容器ul li a：已访问
{
文字装饰：无；
颜色：#666；
显示：块；
填充：15px 5px；
}
#选项卡容器ul li：悬停
{
左边框：8px实心#333；
}
#选项卡容器ul li a：悬停
{
颜色：#000；
}
#选项卡容器ul li.selected
{
边界权：无；
背景色：#fff；
左边框：8px实心#006699；
}
#主容器
{
最小高度：400px；
保证金：0 125px；
填充：20px；
背景色：#fff；
边框：1px实心#888；
}






把你的内容放在这里。。。
使用类似这样的东西，并使用引导它将工作
您可以在这里看到示例：






家
一些内容

菜单1
菜单1中的一些内容

菜单2
菜单2中的一些内容

您可以为每个选项卡创建不同的类，如下所示：
main_container.Tab1{visibility:vissible}
main_containber.Tab2{可见性：隐藏}

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

每个a类的标签数量各有不同的div
即使我使用bootstrap，我仍然可以保持垂直标签格式吗？是的，你可以使用css让它们垂直或水平，无论你想要什么，请看这个谢谢回答，但是，您可以详细说明选项卡类的语法吗。我是否将所有信息都放在相应类的选项卡上？
<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>