js选项卡

最新推荐文章于 2024-09-01 13:33:34 发布

barkL

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量55

点赞数

分类专栏： Js HTML 文章标签： javascript html5

本文链接：https://blog.csdn.net/barkL/article/details/119107963

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				border: #007AFF solid 1px;
				display: none;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var obtns = document.getElementsByTagName("input");
				var odivs = document.getElementsByTagName("div");

				for (i = 0; i < obtns.length; i++) {
					obtns[i].index = i;		//自定义index属性，用来记录i
					obtns[i].onclick = function() {
						// alert(this.value);
						for (j = 0; j < obtns.length; j++) {
							obtns[j].style.backgroundColor = ""; //通过一个循环将btn背景置空
							odivs[j].style.display = "none";
						}
						this.style.backgroundColor = "blue";
						odivs[this.index].style.display = "block";

					}

				}
			}
		</script>

	<body>
		<input type="button" name="" id="btn1" value="btn1" />
		<input type="button" name="" id="btn2" value="btn2" />
		<input type="button" name="" id="btn3" value="btn3" />
		<div id="div1">xxxx</div>
		<div>hhhhh</div>
		<div>bbbbb</div>
	</body>
</html>

this指向当前函数的主人，this是选项卡的关键。

barkL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js选项卡

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div { width: 200px; bor.
复制链接

扫一扫