可多次使用的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日】