选项卡（tab栏切换）
1 <style type="text/css"> 2 *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;} 3 #container{ 4 width: 398px; 5 margin: 100px auto;} 6 #container a{ 7 display:block ; 8 width: 98px; 9 height: 42p什么的乌鸦x; 10 line-height: 42px; 11 清明节扫墓 text-align: center; 12 世界上最大邮轮 float: left;13 border-top: solid 1px #ff4400;14 border-bottom: solid 1px #ff4400;15 border-left: solid 1px #ff4400;16 color: #333333;17 text-decoration: none;18 }19 #container a:hover{20 color: #ff4400;21 }22 .content{23 width: 355px;24 height: 140px;25 text-align: center;26 border-right: solid 1px #ff4400;27 border-bottom: solid 1px #ff4400;28 border-left: solid 1px #ff4400;29 padding: 30px 0 0 40px;30 display: none;31 }32 .clear{clear: left;}33 #container a.on{ background: #ff4400; color: #fff;}34 </style>35 36 </head>37 <body>38 <div id="container">39 <a href="#" class="on">充话费</a>40 <a href="#">充流量</a>41 <a href="#">充固话</a>42 <a href="#" style="border-right: solid 1px #ff4400;">充宽带</a> 43 44 <div class="clear"></div>45 46 hardly<div class="content" style="display:block;">47 <img src="images/1.png" />48 </div>49 <div class="content">50 <img src="images/2.png" />51 </div>52 <div class="content">53 <img src="images/3.png" />54 </div>55 <div class="content">56 <img src="images/4.png" />57 </div>58 </div>59 </body>60 </html>61 <script type="text/javascript">62 //排他思想：让所有的类名和样式都去掉， 让自己加类名，让自己对用的div显示63 var container = document.getelementbyid("container");64 var alla = container.getelementsbytagname("a");65 var con = container.getelementsbyclassname("content");66 for(var i = 0; i < alla.length; i++){//给所有的a标签绑定点击事件67 alla[i].index = i;//在每一个a身上加个自定义属性index，index存的是自己对应父爱如山母爱如水的下标68 alla[i].onclick = function(){69 for(var j = 0; j < alla.length; j++){70 alla[j].classname = "";71 con[j].style.display = "none";72 }73 this.classname = "on";74 con[this.index].style.display = "block";75 }76 }77 </script>
本文发布于:2023-04-03 09:30:56，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/8054738ab84746b5402815d119eec195.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：选项卡.doc
本文 PDF 下载地址：选项卡.pdf
| 留言与评论（共有 0 条评论） |
