效果：
1.点击“JAVA语言”
2.点击“C语言”
3.点击C++语言
代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标签页的切换</title> <style> *{margin:0;padding:0;} #tab li{ float:left; cursor: pointer; list-style-type:none; width:80px; height:40px; line-height:40px; text-align:center; cursor:pointer; } #container{position:relative;} #container1,#container2,#container3{ width:300px; height:100px; padding:30px; position:absolute; top:40px; left:0; } #tab1,#container1{ background-color: red; } #tab2,#container2{ background-color: green; } #tab3,#container3{ background-color: blue; } </style> <script> function show(n) { var x=document.querySelector("div[style]"); x.removeAttribute("style"); document.getElementById("container"+n).style.zIndex="1"; } </script> </head> <body> <ul id="tab"> <li id="tab1" onclick="show(1);">JAVA语言</li> <li id="tab2" onclick="show(2);">C语言</li> <li id="tab3" onclick="show(3);">C++语言</li> </ul> <div id="container"> <div id="container1" style="z-index: 1;">JAVA语言是现今世界上最流行的语言</div> <div id="container2">C语言是一种面向过程的语言</div> <div id="container3">C++语言是面向对象的语言</div> </div> <body>