查看: 2629|回复: 0

[DIV/CSS] 标签页的切换方法(DOM)

发表于 2016-9-7 12:00:00
太阳http代理AD

效果:

1.点击“java语言

2.点击“C语言”

3.点击C++语言

代码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>标签页的切换</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. #tab li{
  9. float:left;
  10. cursor: pointer;
  11. list-style-type:none;
  12. width:80px;
  13. height:40px;
  14. line-height:40px;
  15. text-align:center;
  16. cursor:pointer;
  17. }
  18. #container{position:relative;}
  19. #container1,#container2,#container3{
  20. width:300px;
  21. height:100px;
  22. padding:30px;
  23. position:absolute;
  24. top:40px;
  25. left:0;
  26. }
  27. #tab1,#container1{
  28. background-color: red;
  29. }
  30. #tab2,#container2{
  31. background-color: green;
  32. }
  33. #tab3,#container3{
  34. background-color: blue;
  35. }
  36. </style>
  37. <script>
  38. function show(n)
  39. {
  40. var x=document.querySelector("div[style]");
  41. x.removeAttribute("style");
  42. document.getElementById("container"+n).style.zIndex="1";
  43. }
  44. </script>
  45. </head>
  46. <body>
  47. <ul id="tab">
  48. <li id="tab1" onclick="show(1);">JAVA语言</li>
  49. <li id="tab2" onclick="show(2);">C语言</li>
  50. <li id="tab3" onclick="show(3);">C++语言</li>
  51. </ul>
  52. <div id="container">
  53. <div id="container1" style="z-index: 1;">JAVA语言是现今世界上最流行的语言</div>
  54. <div id="container2">C语言是一种面向过程的语言</div>
  55. <div id="container3">C++语言是面向对象的语言</div>
  56. </div>
  57. <body>
复制代码



太阳http代理AD
回复

使用道具 举报