<style>
* {
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
.box{
width: 600px;
height: 400px;
border:3px solid pink;
display: flex;
flex-direction: column;
}
.box > ul{
flex: 1;
color: #fff;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box >ul >li.active{
background-color: orange;
}
.box >ol{
flex: 1;
position: relative;
}
.box >ol >li{
width: 100%;
height: 100%;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box > ol li.active{
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
// 获取元素
var btns = document.querySelectorAll("ul > li");
var tabs = document.querySelectorAll("ol > li");
// 给 btns 里面所有按钮添加点击事件
btns.forEach(function(item,index){
item.onclick = function(){
// 给btns 和 tabs 里面的所有内容取消 active 类名
btns.forEach(function(t,i){
t.className = " ";
tabs[i].className = " ";
})
// 当前点击按钮和索引对应的盒子添加 active 类名
item.className = "active";
tabs[index].className = "active";
}
})
</script>
</body>
JavaScript练习小案例-----选项卡
最新推荐文章于 2024-09-25 14:00:00 发布
该博客介绍了一个使用CSS和JavaScript实现的交互式网页示例。通过点击列表项,相应的内容区域会显示或隐藏,实现了动态切换效果。CSS用于定义页面布局和样式,如粉色边框、天空蓝背景以及紫色内容区域。JavaScript则用于监听和响应用户点击事件,动态添加和移除'active'类,从而控制内容的显示与隐藏。此示例展示了前端开发中常用的事件处理和DOM操作技巧。
摘要由CSDN通过智能技术生成