同一网页使用多个滑动门（选项卡）的方法

2024-09-05 12:19:47

字体：大中小

来源：转载

供稿：网友

在同一网页上使用多个滑动门（选项卡）的方法，有不少朋友曾经提到过，有时候需要在同一网页上使用多个选项卡，对不太熟悉CSS的朋友来说有点让他们头疼，希望通过本示例帮你解决这个问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑动门</title> <style media="screen" type="text/css">  </style> <script type="text/javascript" language="javascript">  </script> </head> <body> <div class="w936"> <div id="tb_" class="tb_ tabs"> <ul> <li id="tb_1" onmouseover="HoverLi(1);"><span>菜单选项</span></li> <li id="tb_2" onmouseover="HoverLi(2);"><span>菜单选项</span></li> <li id="tb_3" onmouseover="HoverLi(3);"><span>菜单选项</span></li> <li id="tb_4" onmouseover="HoverLi(4);"><span>菜单选项</span></li> <li id="tb_5" onmouseover="HoverLi(5);"><span>菜单选项</span></li> <li id="tb_6" onmouseover="HoverLi(6);"><span>菜单选项</span></li> <li id="tb_7" onmouseover="HoverLi(7);"><span>菜单选项</span></li> <li id="tb_8" onmouseover="HoverLi(8);"><span>菜单选项</span></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">内容1</div> <div class="undis" id="tbc_02">内容2</div> <div class="undis" id="tbc_03">内容3</div> <div class="undis" id="tbc_04">内容4</div> <div class="undis" id="tbc_05">内容5</div> <div class="undis" id="tbc_06">内容6</div> <div class="undis" id="tbc_07">内容7</div> <div class="undis" id="tbc_08">内容8</div> </div> </div> <div class="w936"> <div id="tb_" class="tb_  tabs"> <ul> <li id="tb_9" onmouseover="HoverLi(9);"><span>菜单选项</span></li> <li id="tb_10" onmouseover="HoverLi(10);"><span>菜单选项</span></li> <li id="tb_11" onmouseover="HoverLi(11);"><span>菜单选项</span></li> <li id="tb_12" onmouseover="HoverLi(12);"><span>菜单选项</span></li> <li id="tb_13" onmouseover="HoverLi(13);"><span>菜单选项</span></li> <li id="tb_14" onmouseover="HoverLi(14);"><span>菜单选项</span></li> <li id="tb_15" conmouseover="HoverLi(15);"><span>菜单选项</span></li> <li id="tb_16" onmouseover="HoverLi(16);"><span>菜单选项</span></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_09">内容9</div> <div class="undis" id="tbc_010">内容10</div> <div class="undis" id="tbc_011">内容11</div> <div class="undis" id="tbc_012">内容12</div> <div class="undis" id="tbc_013">内容13</div> <div class="undis" id="tbc_014">内容14</div> <div class="undis" id="tbc_015">内容15</div> <div class="undis" id="tbc_016">内容16</div> </div> </div> </body> </html>

上一篇：仿淘宝网的网页选项卡（超级漂亮）

下一篇：竖向圆角变色的CSS菜单栏