dchengquan的gravatar头像
dchengquan 2013-01-28 12:37:00

jquery简单的tab切换特效插件jquery-tab demo代码下载

jquery简单的tab切换特效插件jquery-tab demo代码下载

<!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>
<title></title>
<script src="http://img.jb51.net/jslib/jquery/jquery.js"
	type="text/javascript"></script>
<style type="text/css">
.tab {
	background-color: #FAFAFA;
	margin: 5px 8px;
	padding: 5px 10px;
}

.tab p span {
	background-color: #EFEFEF;
	border: 1px solid #CCCCCC;
	cursor: pointer;
	margin-right: 6px;
	padding: 2px 5px;
}

.tab p span.current {
	background-color: #FAFAFA;
	border-bottom-color: #fafafa;
}

.tab p {
	border-bottom: 1px solid #CCCCCC;
	font-weight: bold;
	padding: 0 10px 2px;
}

.tab li {
	border-bottom: 1px dotted #CCCCCC;
	padding-bottom: 3px;
	margin: 5px 0;
}

.tab .mhot,.tab.allhot {
	display: none;
}
</style>
<script type="text/javascript"> $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); }); </script>
</head>
<body>
	<div class="tab">
		<p>
			<span id="tab1">tab1</span> <span id="tab2">tab2</span> <span
				id="tab3">tab3</span>
		</p>
		<ul class="tab1">
			<li>最代码</li>
			<li>www.zuidaima.com</li>
			<li>我和我</li>
		</ul>
		<ul class="tab2">
			<li>一花一世办</li>
			<li>一草一天堂</li>
		</ul>
		<ul class="tab3">
			<li>阿里巴巴</li>
			<li>阿里巴巴</li>
			<li>一草一天堂</li>
			<li>我和我的祖国</li>
			<li>最爱的地方</li>
		</ul>
	</div>
</body>
</html>


最代码官方编辑于2014-11-2 9:49:06


打赏

文件名:jquery tab.rar,文件大小:19K 下载
  • /
      • /jquery tab
        • /jquery tab/jquery tab.html
        • /jquery tab/jquery.js
最代码最近下载分享源代码列表最近下载
无心的叶子  LV1 2020年5月11日
ftc1314  LV12 2018年7月6日
凉城冷巷樱花泪  LV6 2018年6月8日
simoncao  LV1 2017年8月19日
韦文灵  LV5 2016年8月2日
j375149869  LV1 2016年5月16日
肖佳佳  LV1 2016年2月27日
dagf113225  LV68 2016年2月25日
最代码-ian  LV26 2016年1月26日
匡兴(秀泽)  LV28 2015年6月30日
最代码最近浏览分享源代码列表最近浏览
CXZ1340465398  LV1 11月10日
cqbscxh  LV11 9月30日
Michelle1106  LV5 2021年3月8日
852067175  LV1 2020年7月7日
无心的叶子  LV1 2020年5月11日
风起人散 人走茶凉  LV1 2020年4月3日
rayson  LV2 2019年9月9日
Java基础入门  LV12 2019年7月3日
大少爷jy 2019年6月12日
暂无贡献等级
chennguo  LV6 2019年4月14日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友