<!DOCTYPE html> <html> <head> <title>简易选项卡</title> <style type="text/css"> *{ margin: 0px; padding: 0px; text-align: center; } ul{ list-style-type: none; } .bpp5{ left: 468px; top: 60px; position: relative;} .item{ width: 267px; height: 300px; position: relative; } .item li{ float: left; height: 40px; padding-left: 20px; padding-right: 20px; line-height: 40px; border: 0.5px solid #333333; cursor: pointer; color: #ffffff; } .content{ width: 267px; height: 260px; top: 40px; left: 0px; clear: both; position: absolute; z-index: 0; font-size: 200px; line-height: 260px; } </style> </head> <body> <div class="bpp5"> <ul class="item"> <li>第一课 <div class="content" style="z-index: 2";></div> </li> <li>第二课 <div class="content"></div> </li> <li>第三课 <div class="content"></div> </li> </ul> </div> <script type="text/javascript"> // 创建选项卡类 var content_txt = [ {text: '0', color: "orange"}, {text: '1', color: "pink"}, {text: '2', color: "blue"} ]; // 初始值函数 var cleanactive = function(arr){ for(var i = 0; i < arr.length; i++){ arr[i].style.color = "#fff"; arr[i].style.backgroundColor = "#333"; arr[i].children[0].style.zIndex = "0"; } } window.onload = function(){ // 获取元素 var items = document.getElementsByClassName("item")[0].getElementsByTagName("li"); // 生成选项卡内容 for(var i = 0; i < items.length; i++){ items[i].style.backgroundColor = "#333"; items[i].children[0].innerHTML = content_txt[i].text; items[i].children[0].style.backgroundColor = content_txt[i].color; } // 遍历点击事件 for(i = 0; i < items.length; i++){ // console.log(items[i].children[0]); items[i].onclick = function(){ cleanactive(items); this.style.color = "#333"; this.style.backgroundColor = "#ccc"; this.children[0].style.zIndex = "2"; } } } </script> </body> </html>
转载请标明出处:JS简易选项卡
文章来源: https://blog.csdn.net/qq_44254672/article/details/91844220