• 欢迎访问开心洋葱网站，在线教程，推荐使用最新版火狐浏览器和Chrome浏览器访问本网站，欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户，开心洋葱官网已经开启复制功能！
  • 欢迎访问开心洋葱网站，手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~！
  • 由于近期流量激增，小站的ECS没能经的起亲们的访问，本站依然没有盈利，如果各位看如果觉着文字不错，还请看官给小站打个赏~~~~~~~~~~~~~！

[jQuery]重复调用选项卡

JAVA相关 水墨上仙 2789次浏览

[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>
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ" src="http://www.ryeen.com/Res/JavaS/jquery.js"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">
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();
});
}
</ｓｃｒｉｐｔ>
<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>
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">
mTab("#tab");mTab("#tab1");
</ｓｃｒｉｐｔ>

开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明[jQuery]重复调用选项卡！
喜欢 (0)
加载中……