<body>
<div class="box" id="box">
<div class="hd">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="bd">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<script>
function my(id){
return document.getElementById(id);
}
//获取最外面的div
var box=my("box");
//获取里面的第一个div
var hd= box.getElementsByTagName("div")[0];
//获取里面的第二个div
var bd=box.getElementsByTagName("div")[1];
//获取所有li标签
var list=bd.getElementsByTagName("li");
//获取所有span标签
var spans=hd.getElementsByTagName("span");
//遍历span标签
for (var i = 0; i < spans.length; i++) {
//在点击之前保存索引span标签中
spans[i].setAttribute("index",i);
spans[i].onclick=function(){
//1.所有span的样式全部移除
for (var j = 0; j < spans.length; j++) {
spans[j].removeAttribute("class");
}
//2.被点击span的应用样式
this.className="current";
//span被点击时候存储索引值
var num=this.getAttribute("index");
//获取所有li标签,每个li标签全部隐藏
for (var l = 0; l < list.length; l++) {
list[l].removeAttribute("class");
}
//当前点击span对应li标签显示
list[num].className="current";
}
}
</script>
</body>
js切换案例
最新推荐文章于 2023-11-28 16:32:14 发布
本文详细讲解如何使用JavaScript实现各种切换效果,包括图片轮播、选项卡切换等常见应用场景,通过实例代码深入理解JS动态切换的原理和技术要点。
摘要由CSDN通过智能技术生成