html:
<!DOCTYPE html>
<HTML xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>tab页</TITLE>
<!--jq代码实现过程-->
<script src="jquery-1.8.2.min.js"></script>
<!--//引入插件-->
<script src="tab.js"></script>
<script>
$ ( function () {
$('#wrapper').tabs(
{
tabHeads:'#tab-menu>li',
tabHeadsClass:'active',
tabBodys:'#tab-main>div',
tabBodysClass:'selected'
}
)
} )
</script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/** .wrapper {
width: 1000px;
height: 475px;
margin: 100px auto;居中
}**/
.tab-item span {
/*position: absolute;*/
width: 1px;
height: 14px;
overflow: hidden;
background: #ddd;
}
.tab {
border:1px solid #ddd;
/**width: 320px;不限制tab页标题宽度**/
height: 36px;
}
/*把li标签作为父盒子,给li标签设置一个相对定位,给span标签作为子盒子设置绝对定位*/
.tab li{
position: relative;
float:left;
width: 20%; /**有多少个tab页就自己算好标题的大小**/
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
/**border-top: 4px solid #fff;不要标签的边框**/
}
.tab li span{
position: absolute;
right: 0;
top: 10px;
width: 1px;
height: 14px;
overflow: hidden;
background-color: #ddd;
}
/**.products {
border: 1px solid #ddd;
width: 1002px;
height: 476px;
}**/
.products .main {
float: left;
display: none;
}
/*下面这两部是点击后的精髓*/
.products .main.selected{
display: block;
}
.tab li.active {
/**border-color: red;
border-bottom: 0;不要边框选中变颜色**/
background-color: #117fbd;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<!--导航栏开始-->
<ul class="tab" id="tab-menu"> <!--第一页div默认添加active选中样式-->
<li class="tab-item active">第1页
<span></span>
</li> <!--如果某个标签页需要加载就去调用获取什么数据,千万不要用onload,会无效,直接在li标签里面使用onclick="" -->
<li class="tab-item" >第2页
<span></span>
</li>
<li class="tab-item">第3页
<span></span>
</li>
<li class="tab-item">第4页
</li>
</ul>
<!--导航栏结束-->
<!--主体开始-->
<div class="products" id="tab-main"> <!--如果多tab页有id冲突,可以使用iframe引入,但iframe引入又很大可能导致很多触发事件失效-->
<!--一个#的a标签默认会跳转到当前页的首部,如果想阻止a标签跳转,又不希望跳转到首页,可以使用<a href="###"></a>-->
<div class="main selected"><!--如果iframe显示不能全屏那么就给当前div设置宽度100%-->
<iframe src="/toReceive" id="iframe_a"></iframe>
</div>
<div class="main">
2222222222222222222222222222222222222222222222222222222222222222
</div>
<div class="main">
3333333333333333333333333333333333333
</div>
<div class="main">
444444444444444444444444444444
</div>
</div>
<!--主体结束-->
</div>
</body>
</html>
tab. js:
(function ($) {
//给$的fn添加方法
$.fn.tabs=function ( options ) {
/* {
tabHeads:'tab-menu>li',
tabHeadsClass:'active',
tabBodys:'tab-main>div',
tabBodysClass:'selected'
}
*/
/**
* @param options 对象
* @param options.tabHeads:上面的li标签
* @param options.tabHeadsClass:li标签需要添加的类名
* @param options.tabBodys:下面四个内容盒子
* @param options.tabBodysClass:下面四个内容盒子需要添加的类名
*/
//将fn这个对象存起来,代码结束的时候让它返回
var $bigDiv=this;
//1.给页签们添加点击事件
$(options.tabHeads).on('click',function ( ) {
//2.给被点击的li标签添加类,给其它兄弟标签移除这个类
$(this).addClass(options.tabHeadsClass).siblings().removeClass(options.tabHeadsClass);
//3.获取当前点击的标签的索引
var idx=$(this).index();
//4.从下面div里面找到和idx相同的索引,给它添加类,其它兄弟页面移除这个类
$(options.tabBodys).eq(idx).addClass(options.tabBodysClass).siblings().removeClass(options.tabBodysClass)
})
return $bigDiv;
}
}(jQuery))