自定义属性选项卡
/1. 首先清空所有div li 的 选中样式 2.给当前传递的索引 加入active样式/
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选项卡</title><style>*{margin: 0;padding: 0;}ul,ol{list-style: none;}.box{width: 500px;margin: 20px auto;}.box .tab{display: flex;justify-content: flex-start;align-items: center;position: relative;top:1px}.box .tab li{box-sizing: border-box;padding: 0 20px;height: 35px;line-height: 33px;border: 1px solid #CCC;background-color: #ddd;color:#555;font-size: 14px;margin-right: 15px;cursor: pointer;}.box .tab li.active{background-color:#fff;border-bottom-color: #fff;font-weight: bold;}.box .content div{height: 200px;box-sizing: border-box;padding: 14px;border: 1px solid #CCC;display: none;}.box .content div.active{display: block;}</style></head><body><section class="box" id="box"><ul class="tab"><li class="active">音乐</li><li>电影</li><li>动漫</li></ul><div class="content"><div class="active">认真的雪</div><div>我的姐姐</div><div>斗罗大陆</div></div></section><script>/*document.getElementById([元素ID]);//元素对象[context].getElementsByTagName([标签名]);//通过元素名获得一组元素集合[context].getElementsByClassName([样式类名]);通过类名获得一组元素集合 不支持ie6/7/8document.getElementsByName([name属性值]); 例如checkboxdocument.documentElement 获取HTML元素对象document.head 获取HEAD元素对象documnet.body 获取BODY元素对象------不兼容IE 6 7 8[context].querySelector([选择器]) 获取和选择器匹配中的第一个对象[context].querySelectorAll([选择器]) 获取选择器匹配的所有结果 【节点集合 类数组】className 获取或设置标签的class类名*/var box=document.querySelector("#box"),tabList=box.querySelectorAll(".tab>li"),conList=box.querySelectorAll('.content>div');/* 封装一个方法 告诉我点击是哪个 点击那一项的索引传递进来我首先把所有的LI/DIV 都清除选中样式，然后再让告诉的这个有选中样式*/function changeTab(index){for (var i = 0; i < tabList.length; i++) {tabList[i].className='';conList[i].className='';}tabList[index].className='active';conList[index].className='active';}/* 循环所有的li 分别给每一个Li绑定点击事件 当点击某个LI的时候 执行changeTab 并且传递对应索引 */for (var i = 0; i < tabList.length; i++) {tabList[i].myIndex=i;tabList[i].onmouseover=function(){changeTab(this.myIndex);};};</script></body></html>
选项卡优化
/
1.给当前的li和div 增加active选中 清空上一个active选中的样式
/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.box{
width: 500px;
margin: 20px auto;
}
.box .tab{
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
top:1px
}
.box .tab li{
box-sizing: border-box;
padding: 0 20px;
height: 35px;
line-height: 33px;
border: 1px solid #CCC;
background-color: #ddd;
color:#555;
font-size: 14px;
margin-right: 15px;
cursor: pointer;
}
.box .tab li.active{
background-color:#fff;
border-bottom-color: #fff;
font-weight: bold;
}
.box .content div{
height: 200px;
box-sizing: border-box;
padding: 14px;
border: 1px solid #CCC;
display: none;
}
.box .content div.active{
display: block;
}
</style>
</head>
<body>
<section class="box" id="box">
<ul class="tab">
<li class="active">音乐</li>
<li>电影</li>
<li>动漫</li>
</ul>
<div class="content">
<div class="active">认真的雪</div>
<div>我的姐姐</div>
<div>斗罗大陆</div>
</div>
</section>
<script>
var box=document.querySelector("#box"),
tabList=box.querySelectorAll(".tab>li"),
conList=box.querySelectorAll('.content>div');
//prevIndex 上一个选中LI的索引 初始值为零 因为最开始选中的是第一个
var prevIndex=0;
for (var i = 0; i < tabList.length; i++) {
tabList[i].myIndex=i;
tabList[i].onmouseover=function(){
//this.myIndex:当前点击这一项的索引
var curindex=this.myIndex;
if(curindex===prevIndex)return;
//4. 如果当前操作的这一项和选中的这一项是同一项 则无需做任何处理
//1. 操作的是谁 就让谁有选中样式
//className: 存储的是字符串，代表当前元素的类名
tabList[curindex].className=conList[curindex].className='active';
//之前选中的是谁 让他没有选中样式
tabList[prevIndex].className=conList[prevIndex].className='';
//当前操作的索引是下一次操作的”上一次索引“
prevIndex=curindex;
};
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.box{
width: 500px;
margin: 20px auto;
}
.box .tab{
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
top:1px
}
.box .tab li{
box-sizing: border-box;
padding: 0 20px;
height: 35px;
line-height: 33px;
border: 1px solid #CCC;
background-color: #ddd;
color:#555;
font-size: 14px;
margin-right: 15px;
cursor: pointer;
}
.box .tab li.active{
background-color:#fff;
border-bottom-color: #fff;
font-weight: bold;
}
.box .content div{
height: 200px;
box-sizing: border-box;
padding: 14px;
border: 1px solid #CCC;
display: none;
}
.box .content div.active{
display: block;
}
</style>
</head>
<body>
<section class="box" id="box">
<ul class="tab">
<li class="active">音乐</li>
<li>电影</li>
<li>动漫</li>
</ul>
<div class="content">
<div class="active">认真的雪</div>
<div>我的姐姐</div>
<div>斗罗大陆</div>
</div>
</section>
<script>
var box=document.querySelector("#box"),
tabList=box.querySelectorAll(".tab>li"),
conList=box.querySelectorAll('.content>div');
//prevIndex 上一个选中LI的索引 初始值为零 因为最开始选中的是第一个
var prevIndex=0;
for (var i = 0; i < tabList.length; i++) {
tabList[i].myIndex=i;
tabList[i].onmouseover=function(){
//this.myIndex:当前点击这一项的索引
var curindex=this.myIndex;
if(curindex===prevIndex)return;
//4. 如果当前操作的这一项和选中的这一项是同一项 则无需做任何处理
//1. 操作的是谁 就让谁有选中样式
//className: 存储的是字符串，代表当前元素的类名
tabList[curindex].className=conList[curindex].className='active';
//之前选中的是谁 让他没有选中样式
tabList[prevIndex].className=conList[prevIndex].className='';
//当前操作的索引是下一次操作的”上一次索引“
prevIndex=curindex;
};
};
</script>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
