麦鸡的TAB切换功能结合了javascript和css

这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了
做个滑动门,需要一个图片

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){//根据mun添加class,使它显示 
var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//获取节点 
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 
}

演示地址

您可能感兴趣的文章:

• JS封装的选项卡TAB切换效果示例
• JS实现仿Windows经典风格的选项卡Tab切换代码
• js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
• 跨浏览器通用、可重用的选项卡tab切换js代码
• 一个精简的JS DIV层tab切换代码
• js(JavaScript)实现TAB标签切换效果的简单实例
• 一个js的tab切换效果代码[代码分离]
• 基于jquery的tab切换 js原理
• javascript仿126邮箱TAB切换效果
• div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
• javascript 定时自动切换的选项卡Tab
• javascript实现tab切换的四种方法
• JS实现简单的tab切换选项卡效果