可多次使用的jQuery tab选项卡代码
可多次使用的jQuery tab选项卡代码
<!DOCTYPE html>
<html>
<head>
<title>可多次使用的jQuery tab选项卡代码</title>
</head>
<body>
<h1 class="tit-h1">jQuery tab选项卡插件(可多次使用)</h1>
<style type="text/css">
*{ margin:0; padding:0;}
/* 本案例需要的css样式 */
.tab-hd { background:#F93; overflow:hidden; zoom:1;}
.tab-hd a{ float:left; width:150px;}
.tab-hd a.active{ background:#F60;}
.tab-bd div{display:none;}
.tab-bd div.thisclass{display:block;}
</style>
<div class="tab">
<div class="tab-hd"><a class="active">农家乐</a><a>行业</a><a>周边游</a></div>
<div class="tab-bd"><div class="thisclass">内容1</div><div>内容2</div><div>内容3</div></div>
</div>
<div class="tab">
<div class="tab-hd"><a class="active">选项1</a><a>选项2</a><a>选项3</a></div>
<div class="tab-bd"><div class="thisclass">内容1</div><div>内容2</div><div>内容3</div></div>
</div>
<s cript src="jquery.min.js"></s cript>
<s cript>
$(function(){
function tabs(tabTit,on,tabCon){
$(tabTit).children().hover(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
};
tabs(".tab-hd","active",".tab-bd");
});
</s cript>
</body>
</html>
jquery.min.js可以在网上下载相关的minjs。
查看效果
特定署名信息为：【本文由“周车车”发布，2017年07月18日】
