照片
html代码书写
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active2">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
css样式书写
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
.box {
width: 600px;
height: 400px;
border: 3px solid #666;
margin: 50 auto;
display: flex;
flex-direction: column;
}
.box>ul {
height: 60px;
display: flex;
}
.box>ul>li {
flex: 1;
background-color: skyblue;
color: white;
text-align: center;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box>ul>li.active {
background-color: orangered;
}
.box>ol {
flex: 1;
position: relative;
}
.box>ol>li {
width: 100%;
height: 100%;
background-color: purple;
position: absolute;
left: 0;
top: 0;
font-size: 100px;
color: #fff;
display: none;
}
.box>ol>li.active2 {
display: block;
}
</style>
js书写
<script>
/* 获取元素 */
var btn = document.querySelectorAll('ul>li');
// var btns = [...btn];
var boxes = document.querySelectorAll('ol>li');
// console.log(boxes)
/* 给每个按钮添加点击事件 */
for (var i = 0; i < btn.length; i++) {
btn[i].dataset.index = i;// 为了拿到0,1,2 在绑定效果以前存i
btn[i].onclick = function () {
// alert(i); // 3 因为循环结束
// alert(this.dataset.index); // 这是第几个i
/* 让所有的按钮取消高亮
让所有的内容隐藏 */
for (var i = 0; i < btn.length; i++) {
btn[i].className = '';
boxes[i].className = '';
}
// 给点击的加高亮和内容显示
btn[this.dataset.index].className = 'active';
boxes[this.dataset.index].className = 'active2'
}
}
</script>