三.用函数做下拉列表并对内容进行替换。 <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{ 300px; height:40px; background-color:#CCC; text-align:center; line-height:40px; vertical-align:middle} .xiang{ 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{ 300px; height:40px;} .xiang{ 100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; float:left} .tu{ 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>