JavaScript笔记03----制作选项卡

最新推荐文章于 2024-08-30 20:29:15 发布

_kirakira_

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量80

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43212582/article/details/104783890

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件和其他属性一样，可以用JS添加

window.onload可以在整个页面加载完后再去执行window.onload里的代码

否则可能发生当页面加载到某一行代码，里面有一个按钮，按钮的定义在后面的代码才出现，这样系统会报错。

下面的代码中，使用oBtn.onclick = function的方式，将事件当作属性来操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{width: 200px;height: 200px;background:red;}
		</style>
		
		
		<script>
			window.onload = function()
			{
			var oDiv = document.getElementById('div1');
			var oBtn = document.getElementById('btn4');
			
			oBtn.onclick = function()
			{
				oDiv.style.width = "600px";
			};
			
			};
			
			function setStyle(name,value)
			{
				var oDiv = document.getElementById('div1');
				
				oDiv.style[name] = value;
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="变蓝" onclick="setStyle('background', 'blue');" />
		<input type="button" value="变绿" onclick="setStyle('background','green');" />
		<input type="button" value="变黄" onclick="setStyle('background','yellow');" />
		<input id="btn4" type="button" value="变宽"  />
		<div id='div1'></div>
	</body>
</html>

制作选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 .active {background: yellow;}
			#div1 div {width: 200px; height: 200px; background: :#CCC;
			 border:1px solid #AAA; display: none;}
		</style>
	<script>
		window.onload = function()
		{
			var oDiv = document.getElementById('div1');
			var aBtn = oDiv.getElementsByTagName('input');
			var aDiv = oDiv.getElementsByTagName('div');
			
			for(var i=0;i<aBtn.length;++i)
			{
				aBtn[i].index = i;
				aBtn[i].onclick=function ()
				{
					for(var i=0;i<aBtn.length;++i)
					{
						aBtn[i].className = '';
						aDiv[i].style.display = 'none';
					}
					this.className = 'active';
					aDiv[this.index].style.display = 'block';
				};
			}
		};
	</script>	
	</head>
	<body>
		<div id="div1">
			<input class="active" type="button" value="教育" />
			<input type="button" value="培训" />
			<input type="button" value="招生" />
			<input type="button" value="出国" />
			<div style="display: block;">aaaa</div>
			<div>bbbb</div>
			<div>cccc</div>
			<div>dddd</div>
		</div>
	</body>
</html>

this表示当前发生事件的元素

在现在的常用浏览器当中，通过html加入的自定义的属性，浏览器会把它过滤掉，但是通过JS加入的自定义属性可以正常使用。

效果：

_kirakira_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记03----制作选项卡

事件和其他属性一样，可以用JS添加window.onload可以在整个页面加载完后再去执行window.onload里的代码否则可能发生当页面加载到某一行代码，里面有一个按钮，按钮的定义在后面的代码才出现，这样系统会报错。下面的代码中，使用oBtn.onclick = function的方式，将事件当作属性来操作。<!DOCTYPE html><html> &l...
复制链接

扫一扫

专栏目录