【实用随记】js选项卡

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
          body,h2{
            margin:0;
          }
          body{
            font-size:12px;
          }
          h2{
            width:500px;
            height:50px;
            margin:100px auto 0;
            color:red;
            border:1px solid gray;
          }
          h2 span{
            width:80px;
            height:50px;
            line-height:50px;
            text-align:center;
            float:left;
          }
          .tab{
            color:yellow;
            background-color:#999;
            cursor:pointer;
          }
          #tab div{
            width:500px;
            height:200px;
            margin:0 auto;
            border:1px solid blue;
            display:none;
          }
          #tab .ct{
            display:block;
          }


        </style>
    </head>
    <body>
      <div id="tab">
        <h2>
          <span  class="tab"   οnmοuseοver="changeTab(this)">1</span>
          <span  οnmοuseοver="changeTab(this)">2</span>
          <span  οnmοuseοver="changeTab(this)">3</span>
        </h2>
        <div class="ct">11111111111111111111</div>
        <div>222222222222222222</div>
        <div>3333333333333333333</div>
      </div>




    </body>
    <script type="text/javascript">
      var  tabs=document.getElementById("tab").getElementsByTagName("span");
      var  cts=document.getElementById("tab").getElementsByTagName("div");
      function changeTab(mouseover){
        for(i=0;i<tabs.length;i++){
          if(tabs[i]==mouseover){
            tabs[i].className="tab";
            cts[i].className="ct";
         }
         else{
          tabs[i].className="";
          cts[i].className="";
          }
         }
      }


    </script>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值