jscss滑動門代碼,滑動門代碼html

本文目錄一覽:

網頁中的滑動門,用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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
JYLW的頭像JYLW
上一篇 2024-10-04 00:04
下一篇 2024-10-04 00:04

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變數和數…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在著手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29
  • Python愛心代碼動態

    本文將從多個方面詳細闡述Python愛心代碼動態,包括實現基本原理、應用場景、代碼示例等。 一、實現基本原理 Python愛心代碼動態使用turtle模塊實現。在繪製一個心形的基礎…

    編程 2025-04-29
  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例,幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    編程 2025-04-29

發表回復

登錄後才能評論