document操作例题2-下拉列表与选项卡 

三.用函数做下拉列表并对内容进行替换。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin:auto}
#biao{
	width:300px;
	height:40px;
	background-color:#CCC;
	text-align:center;
	line-height:40px;
	vertical-align:middle}
.xiang{
	width:300px;
	height:40px;
	background-color:#0FF;
	text-align:center;
	line-height:40px;
	vertical-align:middle;
	display:none}
.xiang:hover{
	cursor:pointer;
	background-color:red}
#biao:hover{
	cursor:pointer;
	background-color:red}

</style>
</head>          
<body>
<div id="biao" onclick="Biao()">城市</div>
<div class="xiang" onclick="Xiang(this)">北京</div>
<div class="xiang" onclick="Xiang(this)">上海</div>
<div class="xiang" onclick="Xiang(this)">深圳</div>
<div class="xiang" onclick="Xiang(this)">广州</div>
<div class="xiang" onclick="Xiang(this)">济南</div>

</body>
<script type="text/javascript">
function Biao()																				
{
	var xiang=document.getElementsByClassName("xiang")
	for(var i=0;i<xiang.length;i++)
	{
		if(xiang[i].style.display=="block")
		{
			xiang[i].style.display="none"	
		}
		else
		{
			xiang[i].style.display="block"	
		}	
	}	
}
function Xiang(a)
{
	document.getElementById("biao").innerHTML=a.innerHTML;					//对内容进行替换
	var xiang=document.getElementsByClassName("xiang");
	for(var i=0;i<xiang.length;i++)										    //隐藏项
	{
		xiang[i].style.display="none"	
	}
} 	
</script>
</html>

 

 

四.选项卡
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin:auto}
#ka{
	width:300px;
	height:40px;}
.xiang{
	width:100px;
	height:40px;
	text-align:center;
	line-height:40px;
	vertical-align:middle;
	float:left}
.tu{
	width:300px;
	height:300px;}
</style>
</head>          
<body>
<div id="ka">
	<div class="xiang"  onclick="Xuan('xinwen')" style="background-color:#F00">新闻</div>
    <div class="xiang"  onclick="Xuan('junshi')" style="background-color:#0F0">军事</div>
    <div class="xiang"  onclick="Xuan('yule')" style="background-color:#00F">娱乐</div>
</div>
<div id="xinwen" class="tu" style="display:block; background-color:#F00"></div>
<div id="junshi" class="tu" style="display:none; background-color:#0F0"></div>
<div id="yule" class="tu" style="display:none; background-color:#00F"></div>
</body>
<script type="text/javascript">
function Xuan(a)
{
	var a=document.getElementById(a);
	var tu=document.getElementsByClassName("tu");
	for(var i=0;i<tu.length;i++)
	{
		tu[i].style.display="none";	
	}
	a.style.display="block";	
}
</script>
</html>

 

 

posted @ 2018-04-07 23:04  w944372441  阅读(160)  评论(0)    收藏  举报