js切换案例

最新推荐文章于 2023-11-28 16:32:14 发布

林剑南

最新推荐文章于 2023-11-28 16:32:14 发布

阅读量325

点赞数

分类专栏： js案例文章标签： js切换案例

js案例专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<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>

林剑南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js切换案例

&lt;body&gt; &lt;div class="box" id="box"&gt; &lt;div class="hd"&gt; &lt;span class="current"&gt;1&lt;/span&gt; &lt;span&gt;2&lt;/span&gt;
复制链接

扫一扫