选项卡的应用卡

最新推荐文章于 2024-08-12 13:45:08 发布

格林黄

最新推荐文章于 2024-08-12 13:45:08 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

分类专栏： web+css+JavaScript小实践

本文链接：https://blog.youkuaiyun.com/apity123/article/details/72887144

web+css+JavaScript小实践专栏收录该内容

5 篇文章

订阅专栏

按钮的实现

--添加事件

this的使用

--先清空所有的按钮,在选中当前按钮

内容的实现(div)

--先隐藏所有DIv,再显示"当前"DIv

索引值的使用(假设用index表示)

--什么时候用索引值----需要知道"第几个"的时候

html添加index-----会被FF过滤

js添加index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	#div1 div
	{
	
	width:200px;
	height:200px;
	background-color:#CCCCCC;
	display:none;
	}
	#div1 .active
	{
		background-color:#FFFF00;
	}
</style>
<script>
window.onload=function()
{
		var oDiv=document.getElementById("div1");
		var inputCh=oDiv.getElementsByTagName("input");
		var divCh=oDiv.getElementsByTagName("div");
		for(var i=0;i<inputCh.length;i++)
		{
			inputCh[i].index=i;
			inputCh[i].onclick=function()
			{
				for(var j=0;j<inputCh.length;j++)
				{
					inputCh[j].className="";
					divCh[j].style.display="none";
					
				}
				this.className="active";
				divCh[this.index].style.display="block";
			}
		}
}
</script>
</head>

<body>
	<div id="div1">
		<input type="button" class="active" value="教育"/>
		<input type="button" value="体育"/>
		<input type="button" value="篮球"/>
		<input type="button" value="足球"/>
		<div style="display:block">教育div</div>
		<div>体育div</div>
		<div>篮球div</div>
		<div>足球div</div>
	</div>
</body>
</html>