用纯CSS如何制作流行的TAB菜单?

html-css014

用纯CSS如何制作流行的TAB菜单?,第1张

Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大,不管哪种方法,必须要使用javascript调用。

<ul class="tabs">

<li>

<input type="radio" name="tabs" id="tab1" checked />

<label for="tab1">选项卡 1</label>

<div id="tab-content1" class="tab-content">

<p>选项卡内容 1</p>

</div>

</li>

<li>

<input type="radio" name="tabs" id="tab2" />

<label for="tab2">选项卡 2</label>

<div id="tab-content2" class="tab-content">

<p>选项卡内容 2</p>

</div>

</li>

</ul>

<!DOCTYPE html><html> <head> <title>Dropdown</title> <link rel="stylesheet" href="style.css"> <meta charset="utf-8" /> </head> <body> <ul> <li class="dropdown"> <a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a> <div class="dropdown-content" id="dropdown-a"> <a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a> </div> </li> <li class="dropdown"> <a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a> <div class="dropdown-content" id="dropdown-b"> <a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a> </div> </li> </ul> <script src="script.js"></script> </body></html>