选项卡（Tab）切换事件

最新推荐文章于 2022-09-02 15:26:54 发布

weixin_30273175

最新推荐文章于 2022-09-02 15:26:54 发布

阅读量751

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lxystar/p/9952558.html

版权

选项卡切换事件

<style type="text/css">
            *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}
            #container{
                width: 398px; 
                margin: 100px auto;}
            #container a{
                display:block ;
                width: 98px; 
                height: 42px; 
                line-height: 42px; 
                text-align: center; 
                float: left;
                border-top: solid 1px #FF4400;
                border-bottom: solid 1px #FF4400;
                border-left: solid 1px #FF4400;
                color: #333333;
                text-decoration: none;
            }
            #container a:hover{
                color: #FF4400;
            }
            .content{
                width: 355px;
                height: 140px;
                text-align: center;
                border-right: solid 1px #FF4400;
                border-bottom: solid 1px #FF4400;
                border-left: solid 1px #FF4400;
                padding: 30px 0 0 40px;
                display: none;
            }
            .clear{clear: left;}
            #container a.on{ background: #FF4400; color: #fff;}
        </style>
    
    </head>
    <body>
        <div id="container">
            <a href="#"  class="on">充话费</a>
            <a href="#" >充流量</a>
            <a href="#" >充固话</a>
            <a href="#"  style="border-right: solid 1px #FF4400;">充宽带</a>

            <div class="clear"></div>
            
            <div class="content" style="display:block;">
                <img src="images/1.png" />
            </div>
            <div class="content">
                <img src="images/2.png" />
            </div>
            <div class="content">
                <img src="images/3.png" />
            </div>

            <div class="content">
                <img src="images/4.png" />
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
     // 找到所有的导航
     var container = document.getElementById("container");
     var as = container.getElementsByTagName("a");
     // 找到所有内容
     var oDivs = document.getElementsByClassName("content");
     for(var i=0;i<as.length;i++){
         给as设置index属性
        as[i].setAttribute("index",i);
         给as添加点击事件
        as[i].onclick=function(){
         先排除所有的
          for(var j=0;j<as.length;j++){
              as[j].className="";
              oDivs[j].style.display="none";
          }
          再给自己加上
          this.className="on";
          var index=this.getAttribute("index");
          oDivs[index].style.display="block";
        }
     }
</script>

转载于:https://www.cnblogs.com/lxystar/p/9952558.html

weixin_30273175

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡（Tab）切换事件

选项卡切换事件<style type="text/css"> *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;} #container{ width: 398px; margin: 100px au...
复制链接

扫一扫