仅使用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>
推荐答案
对于大多数现代浏览器来说,html和css使用 border-radius
属性(不受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>
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
这篇关于仅使用CSS的HTML选项卡界面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!