实现效果：
实现步骤：
1. body内容元素
<div class="container"><ul class="top_title"><li class="first" index="1">title1</li><li index="2">title2</li><li index="3">title3</li><li index="4">title4</li></ul><div class="tab_content"><div>content1</div><div>content2</div><div>content3</div><div>content4</div></div></div>
2.定义css，修改样式
1>外边框
*{padding: 0;margin: 0;}2>修改内容样式 （让第一个li展示）
.container{width: 30%;height: 30vh;margin: 40px auto;}.container .top_title{display: flex;}.container .top_title li{list-style: none;border: 1px solid black;margin-right: 2px;padding: 4px;cursor: pointer;border-bottom: none;}.container .top_title .first{color: #fff;background-color: lightgray;border-color: black;}.container .tab_content{border: 1px solid black;height: 30vh;}.container .tab_content div{height: 100%;background-color: aqua;display: none;}.container .tab_content div:first-child{display: block;background-color: lightblue;}
3.js实现样式变化
window.onload=function(){var tab_title_li=document.querySelectorAll(".top_title li")var tab_content_div=document.querySelectorAll(".tab_content div")console.log(tab_title_li)for(var i=0;i<tab_title_li.length;i++){// 初始化头部的index属性tab_title_li[i].setAttribute("index",i)// 绑定事件tab_title_li[i].onmouseenter=function(){// 事件触发后标题部分样式有变化+console.log(this)for(var j=0;j<tab_title_li.length;j++){tab_title_li[j].className=""}this.className="first"// 内容部分变化console.log(this.getAttribute("index"))for(var k=0;k<tab_content_div.length;k++){if(k==this.getAttribute("index")){tab_content_div[k].style.display="block"tab_content_div[k].style.background="lightblue";}else{tab_content_div[k].style.display="none"}}}}
2.多tab切换
实现效果：
实现步骤：
1.body部分多来几个tab元素
<body><div class="container"><ul class="top_title"><li class="first" index="1">title1</li><li index="2">title2</li><li index="3">title3</li><li index="4">title4</li></ul><div class="tab_content"><div>content1</div><div>content2</div><div>content3</div><div>content4</div></div></div><div class="container"><ul class="top_title"><li class="first" index="1">title1</li><li index="2">title2</li><li index="3">title3</li><li index="4">title4</li></ul><div class="tab_content"><div>content1</div><div>content2</div><div>content3</div><div>content4</div></div></div><div class="container"><ul class="top_title"><li class="first" index="1">title1</li><li index="2">title2</li><li index="3">title3</li><li index="4">title4</li></ul><div class="tab_content"><div>content1</div><div>content2</div><div>content3</div><div>content4</div></div></div>
</body>2.css样式设计
同以上相同
3.js实现切换
在这里需要注意每个数组的转换
var container=document.querySelectorAll(".container")console.log(container)for(var h=0;h<container.length;h++){// console.log(container[h])// 每一组的标题部分var tab_title_li=container[h].querySelectorAll("li")console.log(tab_title_li)for(var i=0;i<tab_title_li.length;i++){// 绑定index属性tab_title_li[i].setAttribute("index",i)// 绑定事件tab_title_li[i].onmouseenter=function(){// 样式切换// console.log(this.parentNode.children)var first_tab_title_li=this.parentNode.childrenfor(var j=0;j<first_tab_title_li.length;j++){first_tab_title_li[j].className=""}this.className="first"// 内容切换// 获取当前被点击的元素身上的index属性值var first_index=this.getAttribute("index")// console.log(first_index)// 获取被点击li所在的组内所有内容元素var first_tab_content_div=this.parentNode.nextElementSibling.childrenfor(var k=0;k<first_tab_content_div.length;k++){if(first_index==k){first_tab_content_div[k].style.display="block"first_tab_content_div[k].style.background="lightblue"}else{first_tab_content_div[k].style.display="none"}}
