仅使用 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

元素。

http://jsfiddle.net/nzYnc/

HTML：

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

CSS：

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

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

以巧妙的方式使用下一个同级 (

+

) 和

:checked

选择器可以让你制作纯 CSS 手风琴、可切换列表或像这样的选项卡。

Answer 2

在纯 CSS3 中，您可以使用

:target

选择器来实现“选项卡式界面”。
只需谷歌“tab css3：target”即可。这是关于它的教程。

Answer 3

对于大多数现代浏览器来说，可以使用

border-radius

属性来处理 html 和 css（Internet Explorer 8 及以下版本不支持）。

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>