本文目錄一覽:
網頁中的滑動門,用css的設置?
我這沒有你說的只用樣式控制的,我這隻有js控制的我給你發一個你看看,我這還有幾個,想要就給我發消息吧 ” ” 我的滑動門 body{color: #000;font-family: “宋體”, arial;font-size: 12px;background: #fff;text-align: center;margin: 0;}.nTab{float: left;width: 432px;margin: 0 auto;border-bottom:1px #AACCEE solid;background:#d5d5d5;background-position:left;background-repeat:repeat-y;margin-bottom:2px;}.nTab .TabTitle{clear: both;height: 22px;overflow: hidden;}.nTab .TabTitle ul{border:0;margin:0;padding:0;}.nTab .TabTitle li{float: left;width: 70px;cursor: pointer;padding-top: 4px;padding-right: 0px;padding-left: 0px;padding-bottom: 2px;list-style-type: none;}.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}.nTab .TabContent{ width:auto;background:#fff;margin: 0px auto;padding:10px 0 0 0;border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;}.none {display:none;}.c{ clear:both;} function nTabs(thisObj,Num){if(thisObj.className == “active”)return;var tabObj = thisObj.parentNode.id;var tabList = document.getElementById(tabObj).getElementsByTagName(“li”);for(i=0; i tabList.length; i++){ if (i == Num) { thisObj.className = “active”; document.getElementById(tabObj+”_Content”+i).style.display = “block”; }else{ tabList[i].className = “normal”; document.getElementById(tabObj+”_Content”+i).style.display = “none”; }} } 選項卡0開始 標題開始 全部 日誌 諮詢 相冊 商城 社區 內容開始 000 111 222 333 444 555 選項卡0結束 選項卡1開始 標題開始 aaa bbb ccc 單擊 內容開始 000 111 222 333 選項卡1結束
單純使用CSS能實現滑動門效果?
可以的,純css做滑動門有兩種辦法,一個利用hover偽類,另一種就是設置錨點。對應兩種方式觸發滑動門效果,滑鼠懸浮和點擊。
下面各舉一例,
滑鼠懸浮觸發:(此例ie6下無效,因其暫不支持li:hover的偽類)
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
title純CSS下拉菜單/title
style type=”text/css”
a{
font-size:12px;
text-decoration:none;
color:#000000;}
li ul{
display:none;
margin-left:5px;}
li:hover ul{
width:306px;
padding:20px;
height:250px;
display:block;
}
li:hover .fira{border-bottom:#FFFFFF 1px solid;
}#kpk{
position:relative;
width:420px;
}
#kpkli{
float:left;
list-style:none;
margin-right:20px;
}
#kpkli .fira{
border:1px #c6c6c6 solid;
}
.seca{
position:absolute;
z-index:1;
left:-5px;
top:23px;
border:1px #c6c6c6 solid;
height:250px;
width:306px;
padding:20px;
height:250px;
}
.fira{
width:70px;
display:block;
line-height:22px;
background-color:white;
text-align:center;
z-index:2;
}/style
/headbody
div
ul id=”kpk”
li
a href=”#” class=”fira”首頁/a
ul class=”seca” rel=”first”
liA href=”#” target=_self1.首頁新疆阜康鐵路橋樑坍塌多節運煤車廂側翻墜河/A/li
liA href=”#” target=_self2.首頁最高法:承諾不判賴昌星死刑沒有超越法律程序/A/li
liA href=”#” target=_self3.首頁物權法:滿70年住宅建設用地使用權將自動續期/A/li
liA href=”#” target=_self4.首頁弟弟被妻下藥毒死男子買女屍為其配陰婚(圖)/A/li
liA href=”#” target=_self5.首頁揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼/A/li
liA href=”#” target=_self6.首頁美軍高官:不排除和中國發生直接軍事對抗可能/A/li
liA href=”#” target=_self7.首頁浙江東陽傳奇富姐吳英涉嫌非法吸收存款被批捕/A/li
liA href=”#” target=_self8.首頁西方炒作”中國航母威脅論”稱05年已正式服役/A/li
liA href=”#” target=_self9.首頁女孩生活無法自理請人大代表遞交安樂死議案/A/li
liA href=”#” target=_self10.首頁建設部:住房公積金制度將覆蓋農民工/A/li
/ul
!–ul
li11/li
li12/li
li13/li
/ul–
/li
li
a href=”#” class=”fira”鏈接一/a
ul class=”seca”
liA href=”#” target=_self1.鏈接一新疆阜康鐵路橋樑坍塌多節運煤車廂側翻墜河/A/li
liA href=”#” target=_self2.鏈接一最高法:承諾不判賴昌星死刑沒有超越法律程序/A/li
liA href=”#” target=_self3.鏈接一物權法:滿70年住宅建設用地使用權將自動續期/A/li
liA href=”#” target=_self4.鏈接一弟弟被妻下藥毒死男子買女屍為其配陰婚(圖)/A/li
liA href=”#” target=_self5.鏈接一揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼/A/li
liA href=”#” target=_self6.鏈接一美軍高官:不排除和中國發生直接軍事對抗可能/A/li
liA href=”#” target=_self7.鏈接一浙江東陽傳奇富姐吳英涉嫌非法吸收存款被批捕/A/li
liA href=”#” target=_self8.鏈接一西方炒作”中國航母威脅論”稱05年已正式服役/A/li
liA href=”#” target=_self9.鏈接一女孩生活無法自理請人大代表遞交安樂死議案/A/li
liA href=”#” target=_self10.鏈接一建設部:住房公積金制度將覆蓋農民工/A/li
/ul
!–ul
li21/li
li22/li
li23/li
/ul–
/li
li
a href=”#” class=”fira”鏈接二/a
ul class=”seca”
liA href=”#” target=_self1.鏈接二新疆阜康鐵路橋樑坍塌多節運煤車廂側翻墜河/A/li
liA href=”#” target=_self2.鏈接二最高法:承諾不判賴昌星死刑沒有超越法律程序/A/li
liA href=”#” target=_self3.鏈接二物權法:滿70年住宅建設用地使用權將自動續期/A/li
liA href=”#” target=_self4.鏈接二弟弟被妻下藥毒死男子買女屍為其配陰婚(圖)/A/li
liA href=”#” target=_self5.鏈接二揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼/A/li
liA href=”#” target=_self6.鏈接二美軍高官:不排除和中國發生直接軍事對抗可能/A/li
liA href=”#” target=_self7.鏈接二浙江東陽傳奇富姐吳英涉嫌非法吸收存款被批捕/A/li
liA href=”#” target=_self8.鏈接二西方炒作”中國航母威脅論”稱05年已正式服役/A/li
liA href=”#” target=_self9.鏈接二女孩生活無法自理請人大代表遞交安樂死議案/A/li
liA href=”#” target=_self10.鏈接二建設部:住房公積金制度將覆蓋農民工/A/li
/ul
!–ul
li31/li
li32/li
li33/li
/ul–
/li
li
a href=”#” class=”fira”鏈接三/a
ul class=”seca”
liA href=”#” target=_self1.鏈接三新疆阜康鐵路橋樑坍塌多節運煤車廂側翻墜河/A/li
liA href=”#” target=_self2.鏈接三最高法:承諾不判賴昌星死刑沒有超越法律程序/A/li
liA href=”#” target=_self3.鏈接三物權法:滿70年住宅建設用地使用權將自動續期/A/li
liA href=”#” target=_self4.鏈接三弟弟被妻下藥毒死男子買女屍為其配陰婚(圖)/A/li
liA href=”#” target=_self5.鏈接三揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼/A/li
liA href=”#” target=_self6.鏈接三美軍高官:不排除和中國發生直接軍事對抗可能/A/li
liA href=”#” target=_self7.鏈接三浙江東陽傳奇富姐吳英涉嫌非法吸收存款被批捕/A/li
liA href=”#” target=_self8.鏈接三西方炒作”中國航母威脅論”稱05年已正式服役/A/li
liA href=”#” target=_self9.鏈接三女孩生活無法自理請人大代表遞交安樂死議案/A/li
liA href=”#” target=_self10.鏈接三建設部:住房公積金制度將覆蓋農民工/A/li
/ul
!–ul
li41/li
li42/li
li43/li
/ul–
/li
/ul
/div
/body
/html
錨點點擊例:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“”
html
head
title左右布局/title
style type=”text/css”
#nav{
width:303px;
height:200px;
border:1px solid #CCCCCC;
}
#column a {
float:left;
width:100px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
font:bold 14px/30px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
text-align:center;
}
#contant {
width:303px;
height:162px;
overflow:hidden;
}
ul {
margin:0;
padding:0;
list-style-type:none;
padding:4px 0 0 5px;
}
li {
font-size:12px;
overflow:hidden;
padding-left:2px;
line-height:27px;
}
/style
/head
body
div id=”nav”
div id=”column” a href=”#localnew”本地新聞/a a href=”#innernew”國內新聞/a a href=”#enterment” 娛樂新聞/a /div
div id=”contant”
ul id=”localnew”
lia href=”#”我喜歡CSS /a/li
lia href=”#”我喜歡CSS /a/li
lia href=”#”我喜歡CSS /a/li
lia href=”#”我喜歡CSS /a/li
lia href=”#”我喜歡CSS/a/li
lia href=”#”我喜歡CSS/a/li
/ul
ul id=”innernew”
lia href=”#”我喜歡編程/a/li
lia href=”#”我喜歡編程/a/li
lia href=”#”我喜歡編程/a/li
lia href=”#”我喜歡編程 /a/li
lia href=”#”我喜歡編程/a/li
lia href=”#”我喜歡編程/a/li
/ul
ul id=”enterment”
lia href=”#”我喜歡美工/a/li
lia href=”#”我喜歡美工/a/li
lia href=”#”我喜歡美工/a/li
lia href=”#”我喜歡美工/a/li
lia href=”#”我喜歡美工 /a/li
lia href=”#”我喜歡美工/a/li
lia href=”#”我喜歡美工/a/li
/ul
/div
/div
/body
/html
樓主自行copy代碼到本地查看,樣式微調。。。
DIV+CSS 滑動門
DIV+CSS滑動門技術簡介滑動門是一種只需要滑鼠懸停便可自動切換板塊的JS特效。需要說明的是如果要減少板塊,一定要把JS特效中的相應的板塊li的id去掉,否則無法正常顯示。比如要將第五項「li class=”sd02″ id=”m05″滑動門/li」、「div id=”c05″ class=”hidden” 第五層內容 /div」這兩個刪除的話也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05刪除,才能正常顯示。DIV+CSS中的滑動門技術美觀的工藝,真正靈活的介面組件,並根據文本自適應大小,我們可用兩個獨立的背景圖像來創造它。一個在左邊,一個在右邊。把這兩幅圖像想像成兩扇可滑動的門,它們滑到一起並交迭,佔據一個較窄的空間;或者相互滑開,佔據一個較寬的空間,就像下圖所顯示的那樣:這就是使用了DIV+CSS滑動門技術,在這個模型中,一個圖像掩蓋住另一個圖片的一部分。假設我們放置一些獨特的內容在每個圖像的周圍,例如標籤的圓角,我們並不希望上面一副圖像完全的遮蔽住下面一副。為了防止這種情況的發生,我們可以將上面一副圖像(此例中的左邊那幅)控制的儘可能的窄。但仍然要保證一定的寬度來顯現標籤一側的獨特性。如果外部是圓角,我們就應該控制上面一副圖像和它的弧線部分具有一樣的寬度。如果目標在大小上增長,並超過了以上所顯示的寬度,歸咎於文本大小及字體的改變,圖像會被拉開,產生不美觀的間隙。我們需要判斷的是,預測這種可擴展的量將有多大。如果在瀏覽器中改變字體的大小,目標又會如果增長呢?實際來說,我們至少應該估算到字體大小增長至300%的情況。背景圖像也得適應這種增長。對於以上的例子,我們將下面(即右邊)的圖像設為400*150像素,上面的設為9*150像素。在頭腦中,始終要有這樣的認識:背景圖像只是顯示一個可供內容填充的有效空間(即內容區域和padding,稱為doorway)。這兩幅圖像始終和各自外部的邊角相錨定。背景圖像的可見部分和在一起即形成了一個具有這種標籤形狀的空間(doorway):如果標籤被撐大,圖像即滑開,doorway變寬,圖像的也將被顯露的更多:此例中,我在photoshop中製作兩個平滑,細的3D標籤圖像,如文章開頭所顯示的那樣。對於其一,內部明亮,邊框暗淡些,用來表現當前選中的標籤。將這種技巧模型應用於左右兩幅圖像中,我們需要擴大標籤圖像覆蓋的區域,將它裁剪成兩部分:
同樣的方式將應用到被稱為「當前」的標籤中。一旦我們完成了這四幅圖像(1, 2, 3, 4),我們就可以開始用標記和CSS來製作我們的標籤了,對DIV+CSS滑動門技術就簡單介紹到這裡,請關注本文的其他相關報道。
滑動門是怎麼做的啊
滑動門可以用javascript來製作,其代碼如下所示:
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
ul{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整個滑動門的寬度*/}
/*tab切換效果*/
.tb_{滑動門背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用於控制顯示與隱藏的css類*/
.normaltab{選中的滑動門標籤背景}
.hovertab{未選中的滑動門標籤背景}
.dis{display:block;}
.undis{display:none;}
—
/style
script type=”text/javascript” language=”javascript”
//!cdata[
function g(o){return document.getElementbyId(o);}
function HoverLi(n){
//如果有N個標籤,就將i=N;
for(var i=1;i=3;i++){g(‘tb_’+i).className=’normaltab’;g(‘tbc_0’+i).className=’undis’;}g(‘tbc_0’+n).className=’dis’;g(‘tb_’+n).className=’hovertab’;
}
//如果要做成點擊後再轉到請將li中的onmouseover改成onclick;
//]]
/script
/head
body
!–把下面代碼加到body與/body之間–
div class=”w936″
div id=”tb_” class=”tb_”
ul
li id=”tb_1″ class=”hovertab” onMouseOver=”x:HoverLi(1);”
標題1/li
li id=”tb_2″ class=”normaltab” onMouseOver=”i:HoverLi(2);”
標題2/li
li id=”tb_3″ class=”normaltab” onMouseOver=”a:HoverLi(3);”
標題3/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
/div
/div
滑動門的種類有很多很多,從簡單的幾行JS代碼生成的滑動門複雜至使用jQuery效果庫實現各種各樣的切換效果的都有。網頁製作中,很多時候需要充分利用空間。這時候需要使用滑動門這種簡單而實用的技術。
css 滑動門菜單製作
!doctype html
html
head
meta http-equiv=”Content-Type” content=”text/html; charset=gbk” /
title滑動門/title
style
!–
* {
margin:0;
padding:0;
font-size:12px;
}
body {
padding:30px;
}
.tabsBox {
width:400px;
margin:20px auto;
}
.tabs {
height:20px;
}
.tabs li {
width:80px; text-align:center;
padding-top:2px;
line-height:18px;
float:left;
background-color:#ccc;
margin-right:5px;
list-style:none;
position:relative;
cursor:pointer;
color:#333;
}
.tabs li span {
display:none;
}
.tabs .cur {
background-color:#f0f0f0;
}
.tabs .cur span {
display:block;
width:1px;
height:1px;
border:solid 8px;
border-color:#f0f0f0 #fff #fff #fff;
position:absolute;
top:20px;
left:32px;
overflow:hidden;
z-index:-1;
}
.cons {
height:120px;
padding:8px 12px;
overflow:hidden;
border:1px solid #f0f0f0;
position:relative;
z-index:1;
}
.cons ul li {
list-style:none;
line-height:20px;
}
.hidden {
display:none;
}
.block {
display:block;
}
—
/style
/head
body
div class=”tabsBox”
ul id=”Tabs” class=”tabs”
li class=”cur”最新更新span/span/li
li推薦下載span/span/li
li下載排行span/span/li
li本月排行span/span/li
/ul
div id=”TabsCon” class=”cons”
ul
lia href=”/soft/4764.shtml” target=”_blank”基於JavaScript的氣泡提示網頁版/a/li
lia href=”/soft/8021.shtml” target=”_blank”C#調用OFFICE組件生成Excel表格示例/a/li
lia href=”/soft/9011.shtml” target=”_blank”iFrame 框架在多頁面間相互傳值的實例/a/li
lia href=”/soft/1658.shtml” target=”_blank”高亮顯示代碼的在線編輯器ASP.NET版/a/li
lia href=”/soft/1852.shtml” target=”_blank”《Java2核心技術卷2:高級特性》第7版中文高清 PDF/a/li
lia href=”/soft/1361.shtml” target=”_blank”VB餐廳POS收銀軟體/a/li
/ul
ul
lia href=”/soft/1361.shtml” target=”_blank”VB餐廳POS收銀軟體/a/li
lia href=”/soft/3855.shtml” target=”_blank”VB 6.0 簡體中文標準版/a/li
lia href=”/soft/8467.shtml” target=”_blank”Delphi加密隱藏或還原Windows盤符驅動器/a/li
lia href=”/soft/5238.shtml” target=”_blank”ImageVue 2.0 PHP+FLASH+XML高級相冊/a/li
lia href=”/soft/7667.shtml” target=”_blank”VB商品零售進銷存程序含MSSQL資料庫文件/a/li
/ul
ul
lia href=”/jscss/code/1915.shtml” target=”_blank”jQuery 模塊拖動,拖動層效果,可淡入淡出/a/li
lia href=”/jscss/code/1914.shtml” target=”_blank”jQuery單行新聞滾動/a/li
lia href=”/jscss/code/1913.shtml” target=”_blank”經典的jQuery多行文本滾動/a/li
lia href=”/jscss/code/1912.shtml” target=”_blank”JS圖片切換學習版,沒有過多修飾/a/li
lia href=”/jscss/code/1911.shtml” target=”_blank”漂浮廣告代碼,Js演示/a/li
lia href=”/jscss/code/1910.shtml” target=”_blank”邊滾邊停的JS圖片滾動/a/li
/ul
ul
lia href=”/soft/9217.shtml” target=”_blank”遞歸讀取資料庫創建樹控菜單的Delphi例子/a/li
lia href=”/soft/9199.shtml” target=”_blank”VB抓取DLL或EXE應用程序內的圖標資源/a/li
lia href=”/soft/9236.shtml” target=”_blank”jQuery StartStopSlider 滾動切換插件/a/li
lia href=”/soft/9235.shtml” target=”_blank”jQuery EasyUI 實例演示(菜單、TAB等)/a/li
lia href=”/soft/9227.shtml” target=”_blank”VB+SQL2000考試卷(題庫)生成與管理系統/a/li
/ul
/div
/div
script
!–
var lis = document.getElementByIdx_x(“Tabs”).getElementsByTagName_r(“li”);
var uls = document.getElementByIdx_x(“TabsCon”).getElementsByTagName_r(“ul”);
var order = 0;
for(var i=0; ilis.length; i++){
lis[i].value = i;
lis[i].onmouseover = function(){
ChangeTabs(this.value);
};
uls[i].className = “hidden”;
}
lis[order].className = “cur”;
uls[order].className = “block”;
function ChangeTabs(nowTab){
lis[order].className = “”;
uls[order].className = “hidden”;
order = nowTab
lis[nowTab].className = “cur”;
uls[nowTab].className = “block”;
}
—
/script
/body
/html
同一頁面出現多個滑動門效果,求高人解答
html
head
title一款代碼很少的Css+JS滑動門/title
script language=”javascript”
function tabChange(obj,id)
{
var arrayli = obj.parentNode.getElementsByTagName(“li”); //獲取li數組
var arrayul = document.getElementById(id).getElementsByTagName(“ul”); //獲取ul數組
for(i=0;iarrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = “cli”;
arrayul[i].className = “”;
}
else
{
arrayli[i].className = “”;
arrayul[i].className = “hidden”;
}
}
}
/script
style type=”text/css”
.tabbox {width:300px;height:250px;}
.tabmenu {width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
/*第二個滑動門樣式*/
#tabcontent1 {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent1 ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent1 .hidden {display:none;}
/*第三個滑動門樣式*/
#tabcontent2 {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent2 ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent2 .hidden {display:none;}
/style
/head
body
div class=”tabbox”
div class=”tabmenu”
ul
li onmouseover=”tabChange(this,’tabcontent’)” class=”cli”軍事/li
li onmouseover=”tabChange(this,’tabcontent’)”娛樂/li
li onmouseover=”tabChange(this,’tabcontent’)”國內/li
/ul
/div
div id=”tabcontent”
ul name=”tabul”
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
/ul
ul class=”hidden”
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
/ul
ul class=”hidden”
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
/ul
/div
/div
!–第二個滑動門 —
div class=”tabbox”
div class=”tabmenu”
ul
li onmouseover=”tabChange(this,’tabcontent1′)” class=”cli”軍事/li!–修改onmouseover參數’tabcontent1′,與下面div的id名稱一樣 —
li onmouseover=”tabChange(this,’tabcontent1′)”娛樂/li
li onmouseover=”tabChange(this,’tabcontent1′)”國內/li
/ul
/div
div id=”tabcontent1″
ul name=”tabul”
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
/ul
ul class=”hidden”
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
/ul
ul class=”hidden”
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
/ul
/div
/div
!–第三個滑動門 —
div class=”tabbox”
div class=”tabmenu”
ul
li onmouseover=”tabChange(this,’tabcontent2′)” class=”cli”軍事/li
li onmouseover=”tabChange(this,’tabcontent2′)”娛樂/li
li onmouseover=”tabChange(this,’tabcontent2′)”國內/li
/ul
/div
div id=”tabcontent2″
ul name=”tabul”
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
lia href=”#”1111111111111111111111/a/li
/ul
ul class=”hidden”
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
lia href=”#”2222222222222222222222/a/li
/ul
ul class=”hidden”
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
lia href=”#”3333333333333333333333/a/li
/ul
/div
/div
/body
/html
原創文章,作者:JYLW,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/134202.html