一个简单的tab选项卡js代码_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

一个简单的tab选项卡js代码

来源：未知作者：类型：图文教程点击次数：发布时间：2014-12-03 14:19:57

简单的tab选项卡js代码如何实现，先看下效果图：
js tab选项卡代码

运行下面的代码查看效果：

<!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=utf-8" /> <title>tab选项卡</title> <style type="text/css"> body,ul,li,dl,dd{margin:0; padding:0; color:#fff; font-size:14px; font-family:"微软雅黑";} #modify_message{width:600px; margin:50px auto} #modify_message ul,#modify_message li{list-style:none;} #modify_message ul{overflow:hidden; _zoom:1; background:#fff;} #modify_message li{float:left; width:200px; text-align:center; border-right:none; height:30px; line-height:30px; margin-top:1px; background:#06F; font-size:18px;} #modify_message dl{} #modify_message dd{padding:10px; background:#09F;} #modify_message dd input[type=text],#modify_message dd input[type=password]{background:#FFF; border:1px solid #333; border-radius:3px; box-shadow:1px 1px 2px #333; padding:5px; color:#000;} #modify_message dd input[type=button]{padding:5px; background:#06F; color:#fff; font-size:14px; font-family:"微软雅黑"; border-radius:3px; border:1px solid #333; margin-left:50px;} #modify_message dd input[type=button]:hover{background:#0FF; color:#000; cursor:pointer;} .current{background:#09F !important;} </style> <script> var over = function(m){ for(var i=0;i<=3;i++){ if(i == m){ //当前li加上current样式 document.getElementById("li_"+i).setAttribute("class","current"); //让当前的dd显示 document.getElementById("dd_"+i).style.display = "block"; }else{ document.getElementById("li_"+i).setAttribute("class",""); document.getElementById("dd_"+i).style.display = "none"; } } } </script> </head> <body> <div id="modify_message"> <ul> <li id="li_0" class="current" onmouseover="over(0)">账户查询</li> <li id="li_1" onmouseover="over(1)">修改密码</li> <li id="li_2" onmouseover="over(2)">个人信息</li> </ul> <dl> <dd id="dd_0" style=""> 昵称：<input type="text" /><br /><br /> 密码：<input type="password" /><br /><br /> <input type="button" value="查询" /> </dd> <dd id="dd_1" style="display:none;"> 用户名：<input type="text" /><br /><br /> 原密码：<input type="password" /><br /><br /> 新密码：<input type="password" /><br /><br /> <input type="button" value="修改" /> </dd> <dd id="dd_2" style="display:none;"> 姓名：<input type="text" /><br /><br /> 年龄：<input type="text" /><br /><br /> 籍贯：<input type="text" /><br /><br /> 地址：<input type="text" /><br /><br /> 电话：<input type="text" /><br /><br /> <input type="button" value="确定" /> </dd> </dl> </div> </body> </html>
提示：您可以先修改部分代码再运行