CSS 实例系列 - 01 - Tab 滑动门

以下是一个简单的 CSS 滑动门技术实现的示例：

HTML:

<div class="tabs">
  <input type="radio" id="tab1" name="tab-control" checked>
  <input type="radio" id="tab2" name="tab-control">
  <input type="radio" id="tab3" name="tab-control">
  <ul>
    <li title="Tab 1"><label for="tab1">Tab 1</label></li>
    <li title="Tab 2"><label for="tab2">Tab 2</label></li>
    <li title="Tab 3"><label for="tab3">Tab 3</label></li>
  </ul>
  <div class="content">
    <section>
      <h2>Tab 1</h2>
      <p>Content for tab 1.</p>
    </section>
    <section>
      <h2>Tab 2</h2>
      <p>Content for tab 2.</p>
    </section>
    <section>
      <h2>Tab 3</h2>
      <p>Content for tab 3.</p>
    </section>
  </div>
</div>

CSS:

.tabs {
  width: 100%;
  display: inline-block;
}
 
.tabs input[type="radio"] {
  display: none;
}
 
.tabs ul {
  cursor: pointer;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  background: #eee;
  float: left;
  border-bottom: 1px solid #bbb;
}
 
.tabs li {
  float: left;
  margin-bottom: -1px;
}
 
.tabs label {
  display: block;
  padding: 10px 20px;
  border: 1px solid #bbb;
  cursor: pointer;
  background: #e0e0e0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
 
.tabs label:hover {
  background: #ccc;
}
 
.content {
  clear: both;
  padding: 10px;
  position: relative;
  z-index: 1;
  background: #fff;
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  top: -1px;
}
 
.content section {
  display: none;
  padding: 20px;
  border-top: 1px solid #bbb;
}
 
.tabs input[type="radio"]:checked + label {
  background: #fff;
  border-bottom: 1px solid #fff;
  z-index: 3;
}
 
.tabs input[type="radio"]:checked ~ .content section {
  display: block;
  z-index: 2;
}
 
.tabs input[type="radio"]:checked ~ .content section:first-child {
  border-top: none;
}

这个实现使用了一组隐藏的单选按钮和标签来控制内容区域的显示。当用户点击标签时，相应的单选按钮会被选中，从而显示对应的内容区段。这是一个简单的实例，展示了滑动门技术的工作原理。