[jQuery]重复调用选项卡
<!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>Jquery重复调用选项卡 by Marcho, Ryeen.com</title> <script type="text/javascript" src="http://www.ryeen.com/Res/JavaS/jquery.js"></script> <script type="text/javascript"> function mTab(id){ $(id+" dl dt>a:first").addClass("tabActive"); $(id+" dl dd ul").not(":first").hide(); $(id+" dl dt>a").click(function(){ var index = $(id+" dl dt>a").index( $(this) ); $(this).siblings("a").removeClass("tabActive").end().addClass("tabActive"); $(id+" dl dd ul").eq(index).siblings(id+" dl dd ul").hide().end().show(); }); } </script> <link type="text/css" rel="stylesheet" href="common/common.css" /> <style type="text/css"> /* 选项卡 */ body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;} a{color:#424242;text-decoration:none;outline:none;blr:expression(thisthis.onFocus=this.blur());} body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;} .box{margin:0 auto;text-align:left;width:920px;} .clear{clear:both;} .demo{width:500px;border:#dd0000 1px solid; margin:auto; margin-top:50px;} .demo dl dt{ border-bottom:#dd0000 1px solid;height:25px;background:#dd0000; margin-bottom:-1px;} .demo dl dt a{float:left;display:block;cursor:pointer; padding:0 10px;height:25px;line-height:25px;text-align:center;background:#dd0000;color:#fff;} .demo dl dt a.tabActive{background:#fff;color:#dd0000;border-bottom:1px solid #fff;position:relative;border-right:1px solid #dd0000;border-left:1px solid #dd0000;} .demo dl dd{padding:10px;height:200px; clear:both;} </style> </head> <body> <div class="demo">Marcho 2009.12.16</div> <div class="demo" id="tab"> <dl> <dt> <a>Ryeen首页</a> <a>Ryeen博客</a> <a>Ryeen相册</a> <a>Ryeen留言</a> <a>Ryeen注册</a> </dt> <dd> <ul>Ryeen首页</ul> <ul>Ryeen博客</ul> <ul>Ryeen相册</ul> <ul>Ryeen注册</ul> <ul>Ryeen登录</ul> </dd> </dl> </div> <div class="demo" id="tab1"> <dl> <dt> <a>Ryeen首页1</a> <a>Ryeen博客1</a> <a>Ryeen相册1</a> <a>Ryeen留言1</a> <a>Ryeen注册1</a> </dt> <dd> <ul>Ryeen首页1</ul> <ul>Ryeen博客1</ul> <ul>Ryeen相册1</ul> <ul>Ryeen注册1</ul> <ul>Ryeen登录1</ul> </dd> </dl> </div> </body> </html> <script type="text/javascript"> mTab("#tab");mTab("#tab1"); </script>