你的位置:首页 > 网页设计

[网页设计]标签页的切换方法(DOM)


效果:

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>