前端-js例子：tab切换
实现效果：
实现步骤：
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.children
for(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.children
for(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"
}
}原文地址：https://blog.csdn.net/m0_75163045/article/details/142343541
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！