自定义tab(模拟tab效果)

实现效果

html模板

 <div>
        <div class="tab-header">
            <ul>
                <li data-id="item1" title="单击刷新1" class="tab-active">页签1<span class="badge">21</span></li>
                <li data-id="item2" title="单击刷新2">页签2</li>
                <li data-id="item3" title="单击刷新3">页签3</li>
                <li data-id="item4" title="单击刷新4">页签4</li>
                <span class="ul-span not-allowed">页签5</span>
                <span class="ul-span not-allowed">页签6</span>
            </ul>
        </div>
        <div class="tab-content" style="width: 800px;">
            <div id="item1" class="tab-item tab-item-active">
                <div class="tab-header">
                    <ul>
                        <li class="tab-active">全部<span class="badge">21</span></li>
                        <li>收文<span class="badge">10</span></li>
                        <li>发文<span class="badge">8</span></li>
                        <li>出差<span class="badge">11</span></li>
                        <li>请假<span class="badge">1</span></li>
                        <li>其他<span class="badge">0</span></li>
                    </ul>
                </div>
                <div>
                    <table id="normalTaskTable" class="task-table">
                        <thead>
                        <tr>
                            <td style="">任务名称</td>
                            <td style="">任务状态</td>
                            <td style="">下次汇报时间</td>
                            <td style="">是否逾期</td>
                            <td style="">逾期天数</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>测试任务</td>
                            <td>进行中</td>
                            <td>2019-04-25</td>
                            <td>否</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>测试任务2</td>
                            <td>进行中</td>
                            <td>2019-04-25</td>
                            <td>否</td>
                            <td>0</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="item2" class="tab-item">
                <div>
                    内容二
                </div>
            </div>
            <div id="item3" class="tab-item">
                <div>
                    内容三
                </div>
            </div>
            <div id="item4" class="tab-item">
                <div>
                    内容四
                </div>
            </div>
        </div>
    </div>

主要的js

var lis = document.querySelectorAll(".tab-header li"); //查询到所有的样式为tab-header下的li(即tab页签)
    for (var i=0; i<lis.length; i++ ){  //遍历进行绑定事件
        var ele = lis[i];
        ele.addEventListener('click',function(e){
            var element = e.target;
            var children = e.target.parentNode.children; //查找到当前点击的同级元素
            for(var j=0; j<children.length; j++){  //同级元素去掉点击后的效果颜色
                var child  = children[j];
                child.classList.remove("tab-active");
            }
            e.target.classList.add("tab-active"); //当前点击元素添加点击后的效果
            var data_id = element.getAttribute("data-id"); //获取当前点击元素的data-id属性(即其绑定的要显示的内容)
            var contentNode = document.getElementById(data_id); //获取要显示的内容元素
            if(contentNode != null){  // 如果元素不为空
                var contentList = contentNode.parentNode.children; //查找要显示元素的同级元素
                for(var k=0; k<contentList.length; k++){  //隐藏同级元素
                    contentList[k].classList.remove("tab-item-active");
                }
                contentNode.classList.add("tab-item-active");//显示元素
            }
        },false)
    }

主要的css

    .tab-header{

    }
    .tab-header ul,.tab-header-bold ul{
        list-style: none;
        margin: 0;
        padding: 10px 0;
        font-size: 0;
        white-space: nowrap;
        position: relative;
    }
    .tab-header-bold ul{
        color: #ffb07b;
    }
    .tab-header ul li,.tab-header ul .ul-span,
    .tab-header-bold ul li,.tab-header-bold ul .ul-span
    {
        display: inline-block;
        padding: 0px 10px;
        border-right: 1px solid #000000;
        cursor: pointer;
    }
    .tab-header ul li:last-child,.tab-header ul span:last-child,
    .tab-header-bold ul li:last-child,.tab-header-bold ul span:last-child
    {
        border-right: 0px solid #000000;
    }
    .tab-header ul li,.tab-header ul .ul-span{
        font-size: 14px;
    }
    .tab-header-bold ul li,.tab-header-bold ul .ul-span{
        font-size: 16px;
    }
    .tab-content{

    }
    .tab-item{
        min-height: 200px;
        min-width: 300px;
        background-color: #00a080;
        display: none;
        padding: 5px 10px;
    }
    .tab-active{
        color: #0C8CEB;
    }
    .tab-active-color{
        color: #000000;
    }
    .tab-item-active{
        display: block;
    }
    .not-allowed{
        cursor: not-allowed !important;
        color: #adacac;
    }
    .badge{
        position: relative;
        top: -5px;
        right: 0px;
        padding: 0px 5px;
        border-radius: 50%;
        background: #FF8000;
        font-size: 12px;
        color: #fff;
        font-weight: normal;
    }
    .task-table{
        width: 100%;
        border-top: 1px solid #000000;
        border-left: 1px solid #000000;
        border-collapse: collapse; /*设置单元格的边框合并为1*/
    }
    .task-table td{
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
    }
    .task-table thead tr td {
        line-height: 30px;
        text-align: center;
        background-color: #e1e1e1;
        font-weight: bold;

    }
    .task-table tbody tr td{
        padding: 8px;
    }
    .task-table tbody tr:nth-child(odd){
        background-color: #ffffff;
    }
    .task-table tbody tr:nth-child(even){
        background-color: #F9F9F9;
    }
    .task-table tbody tr:hover{
        background-color: #F5F5F5;
    }

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自制模拟tab选项卡效果</title>
</head>
<style type="text/css">
    .tab-header{

    }
    .tab-header ul,.tab-header-bold ul{
        list-style: none;
        margin: 0;
        padding: 10px 0;
        font-size: 0;
        white-space: nowrap;
        position: relative;
    }
    .tab-header-bold ul{
        color: #ffb07b;
    }
    .tab-header ul li,.tab-header ul .ul-span,
    .tab-header-bold ul li,.tab-header-bold ul .ul-span
    {
        display: inline-block;
        padding: 0px 10px;
        border-right: 1px solid #000000;
        cursor: pointer;
    }
    .tab-header ul li:last-child,.tab-header ul span:last-child,
    .tab-header-bold ul li:last-child,.tab-header-bold ul span:last-child
    {
        border-right: 0px solid #000000;
    }
    .tab-header ul li,.tab-header ul .ul-span{
        font-size: 14px;
    }
    .tab-header-bold ul li,.tab-header-bold ul .ul-span{
        font-size: 16px;
    }
    .tab-content{

    }
    .tab-item{
        min-height: 200px;
        min-width: 300px;
        background-color: #00a080;
        display: none;
        padding: 5px 10px;
    }
    .tab-active{
        color: #0C8CEB;
    }
    .tab-active-color{
        color: #000000;
    }
    .tab-item-active{
        display: block;
    }
    .not-allowed{
        cursor: not-allowed !important;
        color: #adacac;
    }
    .badge{
        position: relative;
        top: -5px;
        right: 0px;
        padding: 0px 5px;
        border-radius: 50%;
        background: #FF8000;
        font-size: 12px;
        color: #fff;
        font-weight: normal;
    }
    .task-table{
        width: 100%;
        border-top: 1px solid #000000;
        border-left: 1px solid #000000;
        border-collapse: collapse; /*设置单元格的边框合并为1*/
    }
    .task-table td{
        border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
    }
    .task-table thead tr td {
        line-height: 30px;
        text-align: center;
        background-color: #e1e1e1;
        font-weight: bold;

    }
    .task-table tbody tr td{
        padding: 8px;
    }
    .task-table tbody tr:nth-child(odd){
        background-color: #ffffff;
    }
    .task-table tbody tr:nth-child(even){
        background-color: #F9F9F9;
    }
    .task-table tbody tr:hover{
        background-color: #F5F5F5;
    }
</style>
<body>
    <div>
        <div class="tab-header">
            <ul>
                <li data-id="item5" class="tab-active">页签1</li>
                <li data-id="item6">页签2</li>
                <li data-id="item7">页签3</li>
                <li data-id="item8">页签4</li>
            </ul>
        </div>
        <div class="tab-content" style="width: 800px;">
            <div id="item5" class="tab-item tab-item-active">
                <div>
                    内容一
                </div>
            </div>
            <div id="item6" class="tab-item">
                <div>
                    内容二
                </div>
            </div>
            <div id="item7" class="tab-item">
                <div>
                    内容三
                </div>
            </div>
            <div id="item8" class="tab-item">
                <div>
                    内容四
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="tab-header-bold">
            <ul>
                <li data-id="item1" title="单击刷新1" class="tab-active-color">页签1<span class="badge">21</span></li>
                <li data-id="item2" title="单击刷新2">页签2</li>
                <li data-id="item3" title="单击刷新3">页签3</li>
                <li data-id="item4" title="单击刷新4">页签4</li>
                <span class="ul-span not-allowed">页签5</span>
                <span class="ul-span not-allowed">页签6</span>
            </ul>
        </div>
        <div class="tab-content" style="width: 800px;">
            <div id="item1" class="tab-item tab-item-active">
                <div class="tab-header">
                    <ul>
                        <li class="tab-active">全部<span class="badge">21</span></li>
                        <li>收文<span class="badge">10</span></li>
                        <li>发文<span class="badge">8</span></li>
                        <li>出差<span class="badge">11</span></li>
                        <li>请假<span class="badge">1</span></li>
                        <li>其他<span class="badge">0</span></li>
                    </ul>
                </div>
                <div>
                    <table id="normalTaskTable" class="task-table">
                        <thead>
                        <tr>
                            <td style="">任务名称</td>
                            <td style="">任务状态</td>
                            <td style="">下次汇报时间</td>
                            <td style="">是否逾期</td>
                            <td style="">逾期天数</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>测试任务</td>
                            <td>进行中</td>
                            <td>2019-04-25</td>
                            <td>否</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>测试任务2</td>
                            <td>进行中</td>
                            <td>2019-04-25</td>
                            <td>否</td>
                            <td>0</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="item2" class="tab-item">
                <div>
                    内容二
                </div>
            </div>
            <div id="item3" class="tab-item">
                <div>
                    内容三
                </div>
            </div>
            <div id="item4" class="tab-item">
                <div>
                    内容四
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var lis = document.querySelectorAll(".tab-header li"); //查询到所有的样式为tab-header下的li(即tab页签)
    for (var i=0; i<lis.length; i++ ){  //遍历进行绑定事件
        var ele = lis[i];
        ele.addEventListener('click',function(e){
            var element = e.target;
            var children = e.target.parentNode.children; //查找到当前点击的同级元素
            for(var j=0; j<children.length; j++){  //同级元素去掉点击后的效果颜色
                var child  = children[j];
                child.classList.remove("tab-active");
            }
            e.target.classList.add("tab-active"); //当前点击元素添加点击后的效果
            var data_id = element.getAttribute("data-id"); //获取当前点击元素的data-id属性(即其绑定的要显示的内容)
            var contentNode = document.getElementById(data_id); //获取要显示的内容元素
            if(contentNode != null){  // 如果元素不为空
                var contentList = contentNode.parentNode.children; //查找要显示元素的同级元素
                for(var k=0; k<contentList.length; k++){  //隐藏同级元素
                    contentList[k].classList.remove("tab-item-active");
                }
                contentNode.classList.add("tab-item-active");//显示元素
            }
        },false)
    }
    var boldLis = document.querySelectorAll(".tab-header-bold li");
    for (var i=0; i<boldLis.length; i++ ){
        var ele = boldLis[i];
        ele.addEventListener('click',function(e){
            var element = e.target;
            var children = e.target.parentNode.children;
            for(var j=0; j<children.length; j++){
                var child  = children[j];
                child.classList.remove("tab-active-color");
            }
            e.target.classList.add("tab-active-color");
            var data_id = element.getAttribute("data-id");
            var contentNode = document.getElementById(data_id);
            if(contentNode != null){
                var contentList = contentNode.parentNode.children;
                for(var k=0; k<contentList.length; k++){
                    contentList[k].classList.remove("tab-item-active");
                }
                contentNode.classList.add("tab-item-active");
            }
        },false)
    }

    //重置指定id容器下角标
	function resetBadge(groupId){
		var badges = document.getElementById(groupId).getElementsByClassName("badge");
		for(var i=0; i<badges.length; i++){
			var ele = badges[i];
			ele.innerHTML = 0;
			ele.style.display = "none";
		}
	}
</script>
</html>