原理:利用自定义的num属性与内容的序号(eq() )相对应,实能够简单选中内容(在侧边栏不分块的情况下可直接使用其index()属性)
<!--可关闭的tab标签-->
<div id="aside">
<ul>
<li>
<div class="nav"><a href="javascript:;">主页</a></div>
<ul class="sum">
<li class="list" num=1><a href="javascript:;">主页一</a></li>
<li class="list" num=2><a href="javascript:;">主页二</a></li>
<li class="list" num=3><a href="javascript:;">主页三</a></li>
</ul>
</li>
<li>
<div class="nav"><a href="javascript:;">应用</a></div>
<ul class="sum">
<li class="list" num=4><a href="javascript:;">应用一</a></li>
<li class="list" num=5><a href="javascript:;">应用二</a></li>
<li class="list" num=6><a href="javascript:;">应用三</a></li>
</ul>
</li>
</ul>
</div>
<div id="tab">
菜单
</div>
<div id="content">
<div class="item" style="display: block">首页</div>
<div class="item">主页一</div>
<div class="item">主页二</div>
<div class="item">主页三</div>
<div class="item">应用一</div>
<div class="item">应用二</div>
<div class="item">应用三</div>
</div>
<script>
//侧边栏手风琴
$(".nav").click(
function(){
$(".sum").slideUp();
if($(this).next().is(":hidden")){
$(this).next().slideDown();
}
}
);
// 侧边导航菜单栏的点击事件
$('#aside .list').on('click',function () {
var num=$(this).attr('num');
var text=$(this).text();
$('.item').hide();
$('.item').eq(num).show();
//增加tab导航按钮
if(!$("#tab").text().match(text)){
var $nav=$("<div class='tab-nav' num="+num+"><a href='javascript:;'>"+text+"</a><span style='padding-left: 10px'>X</span></div>");
$("#tab").append($nav);
}
});
// 新增的tab导航栏按钮的点击事件
$('body').on('click','.tab-nav a',function (){
var num=$(this).parent().attr("num");
$('.item').hide();
$('.item').eq(num).show()
});
// 新增tab导航栏关闭按钮的点击事件
$('body').on('click','.tab-nav span',function () {
var num=$(this).parent().attr("num");
var num0=$(this).parent().prev().attr("num");
var num1=$(this).parent().next().attr("num");
$(this).parent().remove();
if($('.item').eq(num).is(":visible")){
$('.item').hide();
if(num1){
$('.item').eq(num1).show()
}
else if(num0){
$('.item').eq(num0).show()
}
else{
$('.item').eq(0).show()
}
}
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
#aside{
position:fixed;
top:0;
left:0;
bottom: 0;
width: 100px;
background: #333333;
}
#aside a{
color: #e6e6e8;
}
#aside>ul{
padding:30px 0 0 0px;
background: black;
text-align: center;
}
.nav{
line-height: 40px;
border-bottom: 1px solid #333333;
}
.sum{
display: none;
}
.list{
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #333333;
}
#tab{
position:relative;
left:100px;
height:50px;
background: wheat;
}
#content{
position: relative;
left:110px;
}
.item{
display: none;
}
.tab-nav{
display: inline-block;
line-height:40px;
padding:0 10px
}
</style>