您的位置：首页 > Web前端 > JQuery

【JS】可多次使用的jQuery tab选项卡

2017-05-22 17:08 441 查看

不多说了，看下面的代码吧！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可多次使用的jQuery tab选项卡</title>
<style type="text/css">
/*通用样式*/
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
ul,li{ list-style:none;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}
/* 本案例需要的css样式 */
.tab{ width:450px; margin:0 auto 50px;}
.tab-hd { background:#F93; overflow:hidden; zoom:1;}
.tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
.tab-hd li.active{ background:#F60;}
.tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
.tab-bd li.thisclass{ display:list-item;}
</style>
</head>
<body>
<h1 class="tit-h1">jQuery tab选项卡插件(可多次使用)</h1>
<div class="wrap">
<div class="tab">
<ul class="tab-hd">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li
4000
>
</ul>
<ul class="tab-bd">
<li class="thisclass">内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//匿名函数自调
$(function(){
//声明函数，参数三个：导航标题、当前选择项、当前标题显示内容
function tabs(tabTit,on,tabCon){
//找到所有标题并添加单机事件
$(tabTit).children().click(function(){
//声明当前选择项
var index = $(tabTit).children().index(this);
//为当前选中项增加active，移除其兄弟元素的active
$(this).addClass(on).siblings().removeClass(on);
//选中项显示内容，未选中项隐藏内容
$(tabCon).children().eq(index).show().siblings().hide();
});
};
tabs(".tab-hd","active",".tab-bd");
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航