国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

麥雞的TAB切換功能結(jié)合了javascript和css

2019-11-21 01:50:49
字體:
供稿:網(wǎng)友
這類型東西網(wǎng)上多的是,但朋友說我的程序程序理念好(嘻…),我也寫一個tab切換,厚著臉皮把它叫麥雞的TAB切換(汗一把先.),轉(zhuǎn)載也請注明麥雞的博客,下面就開始了
做個滑動門,需要一個圖片

CSS

復制代碼 代碼如下:

.nav{position:relative} 
.nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2} 
.nav dt a{color:#555; text-decoration:none} 
.nav dt a:hover{color:#000} 
.nav dt a{ 
    float:left; display:block; height:24px; line-height:26px; overflow:hidden; 
    background:url(/upload/20071217200212700.gif) no-repeat 0 -24px 

.nav dt a span{ 
    display: block; padding:0 15px 0 0; margin:0 0 0 15px; 
    background:url(/upload/20071217200212700.gif) no-repeat right -24px 

.nav dt.on a{background-position:0 0} 
.nav dt.on a span{background-position:right 0} 
.nav dd{ 
    background:#fff; border:solid 1px #ccc; width:400px; margin:0; padding:10px; 
    position:absolute; left:0; top:23px; z-index:1; visibility:hidden 

.nav dd.on{visibility:visible}         

/*-_-!*/ 
.nav dd a{display:block}

xhtml

復制代碼 代碼如下:

<dl class="nav" id="maiji_tab"> 

<dt class="on"> 
  <a href="#this" href="#this" onclick="maiji_tab(0)"><span>精品文章</span></a> 
</dt> 
<dt> 
  <a href="#this" href="#this" onclick="maiji_tab(1)"><span>視頻</span></a> 
</dt> 
<dt> 
  <a href="#this" href="#this" onclick="maiji_tab(2)"><span>照片</span></a> 
</dt><dt> 
  <a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”><span>麥雞的博客</span></a> 
</dt> 

<dd class=”on”> 
  <p>精品文章啊!<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麥雞的博客歡迎你!</a></p> 
</dd><dd> 
  <p>視頻啊!<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麥雞的博客歡迎你!</a></p> 
</dd><dd> 
  <p>你的照片呢?<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麥雞的博客歡迎你!</a></p> 
</dd></dl> 

javascript

復制代碼 代碼如下:

var maiji_tab = function(num){//根據(jù)mun添加class,使它顯示 
var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//獲取節(jié)點 
var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd"); 
for (var i = 0; i < ddArray.length; i++){ 
    dtArray[i].className = '';//取消class 
    ddArray[i].className = ''; 

    dtArray[num].className = 'on'; 
    ddArray[num].className = 'on';//增加class 
}

演示地址
發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 于都县| 邳州市| 舟曲县| 丰城市| 乃东县| 普格县| 美姑县| 瑞昌市| 九龙坡区| 界首市| 团风县| 汪清县| 东兰县| 台安县| 株洲县| 南丹县| 海门市| 翼城县| 阜新市| 英吉沙县| 龙岩市| 黄骅市| 澄城县| 洞头县| 兰州市| 沙湾县| 娄底市| 黔东| 易门县| 长宁区| 犍为县| 嵊泗县| 呼玛县| 泰和县| 汤原县| 额敏县| 云梦县| 哈巴河县| 色达县| 历史| 奉贤区|