仅使用 CSS 的 HTML 选项卡界面答案

【问题标题】：HTML tab interface using only CSS仅使用 CSS 的 HTML 选项卡界面
【发布时间】：2011-06-23 16:03:20
【问题描述】：

是否可以只使用 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>

【问题讨论】：

无 JavaScript 交互在理论上很好，但它们打破了 Web 开发的“三位一体”。 HTML 用于内容（模型），CSS 用于样式（视图），JavaScript 用于交互（控制器）。如果您不想使用 JavaScript，则 HTML 和 CSS 必须弥补不足，这意味着您将更改标记以更改样式。一般来说，您应该将交互留给 JavaScript，并为样式表的优雅降级做好计划。
@zzzzBov 在我看来，HTML 是视图。模型是数据所在的位置（在数据库中？），控制器是操作数据的代码（可能是服务器上的 PHP 或 ASP？） CSS 和 JavaScript 是为了提供视觉增强，但如果它们被删除，网站应该仍然可以运行 - 否则会破坏 HTTP 模型！
@Greg，在 UI 的上下文中，HTML 包含数据并且是模型。如果您谈论的是 Web 应用程序的总体上下文，您的数据库是模型，您的控制器是服务器脚本，您的视图是生成的 HTML、CSS 和 JS。
@zzzzBov 然后像我这样的人出现了，他使用 JavaScript 默认关闭（因为即使是大型知名网站也会受到攻击）并永远诅咒你的名字，因为你的网站没有不行。这是采用progressive enhancement 的几个原因之一，这个问题就是这样做的。

标签： html user-interface tabs css

【解决方案1】：

大多数现代浏览器都可以使用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。

你可以在http://www.w3.org/TR/css3-background/#the-border-radius找到更多关于border-radius的信息

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

【讨论】：

我不明白这如何成为公认的答案，因为它是唯一没有真正回答问题的答案... O_o

【解决方案2】：

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

【讨论】：

【解决方案3】：

: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;
}

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

【讨论】：