仅使用 CSS 的 HTML 选项卡界面

Question

是否可以仅使用 css 而无需使用 javascript 创建选项卡式界面？ 我的意思是能够使用 css/html 切换选项卡，而不需要 javascript。也许用CSS 3.0？

标记将类似于：

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

<div id="tab1"> ...1... </div>
<div id="tab2"> ...2... </div>
<div id="tab3"> ...3... </div>

Answer 1

:target 通常是执行选项卡的首选方式。

您还可以巧妙地使用 input:radio 或 input:checkbox 元素。

以巧妙的方式使用 next-sibling (+) 和 :checked 选择器可以让您制作纯 CSS 手风琴、可切换列表或类似这样的选项卡。

input {
  position: absolute;
  right: 100%;
}

input:checked+div {
  display: block;
}

div {
  display: none;
}

<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
  First content
</div>
<input type="radio" id="two" name="tab" />
<div>
  Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
  Third content
</div>

在 JSFiddle 上查看

Answer 2

在纯 CSS3 中，您可以使用 :target 选择器来实现“选项卡式界面”。
只需谷歌“tab css3：target”。这是关于它的教程。

Answer 3

对于大多数现代浏览器来说，可以使用 border-radius 属性（Internet Explorer 8 及以下版本不支持）来处理 html 和 css。

css

li {-moz-border-radius: 12px 12px 0 0; /* FF1+ */
  -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */
    border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */
    border:1px solid black;
    display:inline;
    list-style-type:none;
    padding:5px;
  }
  li:hover {background:black;}
  li a {text-decoration:none; color:black;}
  li a:hover {color:white;}

html

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

要支持 Internet Explorer，您可以使用 css3pie 但您必须记住它使用 javascript。

您可以在以下位置找到有关 border-radius 的更多信息：http://www.w3.org/TR/css3-background/#the-border-radius

示例： http://jsbin.com/idiza5/2

Answer 4

这是实现该功能的超级简单代码

.tabs {
  display: flex;
  flex-direction: column;
}
 
.tabs .tab-labels {
  display: flex;
  gap:3px;
}
 
.tabs input[type="radio"] {
 display: none;
}
 
.tabs label {
  padding: 1em;
  background: #9AA092;
  cursor: pointer;
  width: 33.333%;
}
 
.tab-content {
  padding: 1em;
  display: none;
  background: DodgerBlue;
}
 
/* Show tab content when corresponding radio button is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <input type="radio" id="tab2" name="tabs">
  <input type="radio" id="tab3" name="tabs">
 
  <div class="tab-labels">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
  </div>
  
  <div id="content1" class="tab-content">
    <h2>Tab 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  
  <div id="content2" class="tab-content">
    <h2>Tab 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  
  <div id="content3" class="tab-content">
    <h2>Tab 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>