仅使用CSS的HTML选项卡界面

小编典典

仅使用CSS的HTML选项卡界面

css

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

阅读 278

2020-05-16

共1个答案

小编典典

对于大多数现代浏览器，使用html和css可以使用该border-radius属性（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。

2020-05-16