自定义tab(模拟tab效果)

怼烎@ 2022-03-01 11:28 263阅读 0赞

实现效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dsZ29t_size_16_color_FFFFFF_t_70][]

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

主要的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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dsZ29t_size_16_color_FFFFFF_t_70]: /images/20220301/97a738b2256543bc9f6d75042ef85056.png