同一網(wǎng)頁使用多個滑動門（選項卡）的方法

2024-09-05 12:19:47

字體：大中小

供稿：網(wǎng)友

在同一網(wǎng)頁上使用多個滑動門（選項卡）的方法，有不少朋友曾經(jīng)提到過，有時候需要在同一網(wǎng)頁上使用多個選項卡，對不太熟悉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   id="iwvjtn8m0"   class="w936"> <div   class="iwvjtn8m0"   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   id="iwvjtn8m0"   class="ctt"> <div   id="iwvjtn8m0"   class="dis" id="tbc_01">內(nèi)容1</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_02">內(nèi)容2</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_03">內(nèi)容3</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_04">內(nèi)容4</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_05">內(nèi)容5</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_06">內(nèi)容6</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_07">內(nèi)容7</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_08">內(nèi)容8</div> </div> </div> <div   id="iwvjtn8m0"   class="w936"> <div   class="iwvjtn8m0"   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   id="iwvjtn8m0"   class="ctt"> <div   id="iwvjtn8m0"   class="dis" id="tbc_09">內(nèi)容9</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_010">內(nèi)容10</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_011">內(nèi)容11</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_012">內(nèi)容12</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_013">內(nèi)容13</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_014">內(nèi)容14</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_015">內(nèi)容15</div> <div   id="iwvjtn8m0"   class="undis" id="tbc_016">內(nèi)容16</div> </div> </div> </body> </html>

上一篇：仿淘寶網(wǎng)的網(wǎng)頁選項卡（超級漂亮）

下一篇：豎向圓角變色的CSS菜單欄