仅使用 CSS 的 HTML 选项卡界面 [英] HTML tab interface using only CSS

问题描述

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

is it possible to create a tabbed interface using just css, no javascript? I mean to be able to switch the tabs using css/html, without javascript. Maybe with 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>

推荐答案

对于使用 border-radius 属性的大多数现代浏览器，html 和 css 是可能的(Internet Explorer 8 及以下不支持)).

It is possible with html and css for most modern browsers using the border-radius property (not supported by internet explorer 8 and below).

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.

To support internet explorer you can use css3pie but you have to keep in mind that it uses javascript.

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

You can find more information about border-radius at: http://www.w3.org/TR/css3-background/#the-border-radius

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

这篇关于仅使用 CSS 的 HTML 选项卡界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！