1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 6 <title>无标题文档</title> 7 <script type="text/javascript"> 8 $(document).ready(function () { 9 $(".tab-nav li").click(function (e) { 10 if (e.target == this) { 11 var panels = $(".tab-main div"); 12 var tabs = $(this); 13 var index = $.inArray(this, $(this).parent().find("li")); 14 if (panels.eq(index)[0]) { 15 tabs.removeClass("cur").eq(index).addClass("cur"); 16 panels.css("display", "none").eq(index).css("display", "block"); 17 } 18 } 19 20 return false; 21 }); 22 }) 23 24 </script> 25 <style type="text/css"> 26 li { 27 width: 200px; 28 cursor:pointer 29 } 30 </style> 31 </head> 32 <body> 33 <ul class="tab-nav"> 34 <li class="cur">1</li> 35 <li>2</li> 36 <li>3</li> 37 </ul> 38 <div class="tab-main"> 39 <div style="display:block"> 1 </div> 40 <div style="display:none"> 2 </div> 41 <div style="display:none"> 3 </div> 42 </div> 43 </body> 44 </html>
2、更简洁的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>
3、代码简洁
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>几行简单的jQuery代码搞定tab标签切换效果</title> 6 <style> 7 *{ margin:0; padding:0;list-style: none;} 8 body {font:12px/1.5 Tahoma;} 9 #outer {width:450px;margin:150px auto;} 10 #tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;} 11 #tab li {float:left;color:#fff;height:30px; cursor:pointer; line-height:30px;padding:0 20px;} 12 #tab li.current {color:#000;background:#ccc;} 13 #content {border:1px solid #000;border-top-width:0;} 14 #content ul {line-height:25px;display:none; margin:0 30px;padding:10px 0;} 15 </style> 16 </head> 17 18 <body> 19 <!-- html代码begin --> 20 <div id="outer"> 21 <ul id="tab"> 22 <li class="current">tab标签</li> 23 <li>qq在线客服代码</li> 24 <li>css3</li> 25 </ul> 26 <div id="content"> 27 <ul style="display:block;"> 28 <a href="http://www.lanrenzhijia.com/tab">tab标签</a> 29 </ul> 30 <ul> 31 <a href="http://www.lanrenzhijia.com/service">qq在线客服代码</a> 32 </ul> 33 <ul> 34 <a href="http://www.lanrenzhijia.com/js/css3">css3</a> 35 </ul> 36 </div> 37 </div> 38 <!-- html代码end --> 39 40 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> 41 <script> 42 $(function(){ 43 window.onload = function() 44 { 45 var $li = $('#tab li'); 46 var $ul = $('#content ul'); 47 48 $li.mouseover(function(){ 49 var $this = $(this); 50 var $t = $this.index(); 51 $li.removeClass(); 52 $this.addClass('current'); 53 $ul.css('display','none'); 54 $ul.eq($t).css('display','block'); 55 }) 56 } 57 }); 58 </script> 59 60 </body> 61 </html>