自定义tab(模拟tab效果) 怼烎@ 2022-03-01 11:28 206阅读 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 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> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dsZ29t_size_16_color_FFFFFF_t_70]: /images/20220301/97a738b2256543bc9f6d75042ef85056.png
还没有评论,来说两句吧...