<!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> <style type="text/css"> *{margin:0px auto; padding:0px} #wai{width:100%; height:500px; margin-top:30px;} #shang{width:100%; height:50px;} #xia{width:100%; height:450px;} .lizi{width:100px; height:50px; float:left; text-align:center; vertical-align:middle; line-height:50px;} .neirong{width:100%; height:450px;} #a{background-color:#F00} #b{background-color:#0F9; display:none} #c{background-color:#936; display:none} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="wai"> <div id="shang"> <div class="lizi" style="background-color:#F00" guanlian="a">例子1</div> <div class="lizi" guanlian="b">例子2</div> <div class="lizi" guanlian="c">例子3</div> </div> <div id="xia"> <div class="neirong" id="a"></div> <div class="neirong" id="b"></div> <div class="neirong" id="c"></div> </div> </div> </body> <script type="text/javascript"> var lizij = document.getElementsByClassName("lizi"); for(var i=0;i<lizij.length;i++){ lizij[i].onclick = function(){ for(var i=0;i<lizij.length;i++){ lizij[i].style.backgroundColor ="white"; } this.style.backgroundColor = "red"; var id = this.getAttribute("guanlian"); var nr = document.getElementsByClassName("neirong"); for(var i=0;i<nr.length;i++){ nr[i].style.display = "none"; } document.getElementById(id).style.display = "block"; } } </script> </html>
<!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> <html> <head> <meta charset="utf-8"> <title>选项卡效果</title> <style type="text/css"> *{ margin:0 auto; padding:0;} #wai{ width:1000px; height:500px; margin-top:50px;} #btl{width:350px; height:30px; margin-left:50px;} .bt{ width:50px; height:30px; text-align:center; line-height:30px; float:left;} .bt:hover{ cursor:pointer;} .nr{ width:100%; height:450px; display:none;} </style> </head> <body> <div id="wai"> <div id="btl"> <div class="bt" sy="0" style="background-color:#999">国内</div> <div class="bt" sy="1">国际</div> <div class="bt" sy="2">军事</div> <div class="bt" sy="3">财经</div> <div class="bt" sy="4">社会</div> <div class="bt" sy="5">娱乐</div> <div class="bt" sy="6">体育</div> </div> <div class="nr" style="background-color:#F00; display:block"></div> <div class="nr" style="background-color:#0F0"></div> <div class="nr" style="background-color:#F60"></div> <div class="nr" style="background-color:#00F"></div> <div class="nr" style="background-color:#FF0"></div> <div class="nr" style="background-color:#0FF"></div> <div class="nr" style="background-color:#F0F"></div> </div> </body> </html> <script type="text/javascript"> var bt = document.getElementsByClassName("bt"); var nr = document.getElementsByClassName("nr"); /* 选中的标题变色，其他标题恢复原色，选中标题的对应选项卡显示，其他选项卡隐藏 */ for(var i=0;i<bt.length;i++) { bt[i].onclick = function() { for(var i=0;i<bt.length;i++) { bt[i].style.backgroundColor = "#fff"; } this.style.backgroundColor = "#999"; var syh = this.getAttribute("sy"); for(var i=0;i<nr.length;i++) { nr[i].style.display = "none"; } nr[syh].style.display = "block"; } } </script>
