<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../js/lib/jquery.min.js"></script>
<script src="smarttab.js"></script>
<style>
.multitab li{
list-style: none;
width : 50px;
height : 20px;
border : 1px solid #bbbbbb;
float: left;
cursor: pointer;
}
.toolbar{
position : relative;
top : 55px;
}
.toolbar>div{
width : 50px;
border : 1px solid #bbbbbb;
cursor: pointer;
}
.multitab_page{
display : none;
}
.tabselected{
background-color: #23afff;
}
.multitab li::after{//伪元素，不能绑定事件，因为它不是真实存在的dom
content: " ";
display: block;
height: 13px;
width: 13px;
background: url(Tab_Cloze.png) no-repeat 0 0;
position: relative;
top : -18px;
left : 35px;
}
.multitab li:not(.tabselected):hover{//过滤选择器
background-color:#BEEBEE;
}
</style>
<script>
$(function(){
$(".toolbar>div").click(function(){
var _tabindex = $(this).attr("toolbarindex");
$(".multitab>ul>li[tabindex = "+_tabindex+"]").click();
});
$(".multitab li").click(function(){
var _pageindex = $(this).attr("tabindex");
$(".multitab>ul>li").removeClass("tabselected");
$(this).addClass("tabselected");
$(".multitab_page").hide();
$(".multitab_page[pageindex = "+_pageindex+"]").show();
});
$(".multitab li::after").click(function(){
var _pageindex = $(this).attr("tabindex");
$(this).hide();
$(".multitab_page[pageindex = "+_pageindex+"]").hide();
});
});
</script>
</head>
<body>
<div class="multitab">
<ul>
<li class = "multitab_li" tabindex="0">tab1</li>
<li class = "multitab_li" tabindex="1">tab2</li>
</ul>
</div>
<div class = "toolbar">
<div class = "toolbar" toolbarindex = "0">1</div>
<div class = "toolbar" toolbarindex = "1">2</div>
</div>
<div class = "multitab_page" pageindex = "0">page1</div>
<div class = "multitab_page" pageindex = "1">page2</div>
</body>
</html>
