js做一个简单的选项卡

最新推荐文章于 2023-07-21 22:38:10 发布

忆昔年.

最新推荐文章于 2023-07-21 22:38:10 发布

阅读量332

点赞数 1

分类专栏：前端 js

本文链接：https://blog.csdn.net/rt5476238/article/details/86174596

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.btns input.cur{/*这是按钮的样式*/
			background-color: gold;
		}
		.cons div{/*这是内容块的样式*/
			width: 500px;
			height: 500px;
			background-color: #bfa;
			text-align: center;
			display: none;
		}
		.cons div.cur{/*这是被选中的页的样式*/
			display: block;
		}
	</style>
	<script>
		window.onload = function(){
			var btns = document.getElementById("btns").getElementsByTagName("input");

			var cons = document.getElementById("cons").getElementsByTagName("div");
			for(var i=0;i<btns.length;i++){
				(function(i){
					btns[i].onclick = function(){
					for(var j=0;j<btns.length;j++){
						btns[j].className = "";
						cons[j].className = "";
					}
					this.className = " cur";

					cons[i].className = " cur";
				}
				})(i)
			}

		}
	</script>
</head>
<body>
	<div class="btns" id="btns">
		<input type="button" value="tab1" class="cur">
		<input type="button" value="tab2" class>
		<input type="button" value="tab3" class>
	</div>
	<div class="cons" id="cons">
		<div id="con1" class="cur">1</div>
		<div id="con2" class="">2</div>
		<div id="con3" class="">3</div>
	</div>
</body>
</html>

当网页渲染完后，就获取按钮和内容，给按钮绑定点击事件。

忆昔年.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js做一个简单的选项卡

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .btns input.cur{/*这是按钮的样式*/ background-colo
复制链接

扫一扫