jquery 模块化 （ 可关闭的tab(选项卡，配合导航栏使用) ）

原理：利用自定义的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>