html5 选项卡

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_30911809

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量712

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liaoliao985786516/p/5585534.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
      <style>
      *{margin: 0;padding: 0;}
      ul li{
              padding: 3%;
              list-style: none;
              width: 33.3%;
              float: left;
              box-sizing: border-box;
          }

      ul li img{
              width: 100%;
              display: block;
          }
      .pox{
          font-size: 30px;
      }
      .show img{
        width: 50%;
       padding: 3%;
       }

       @media only screen and (min-width:960px){
        html{
           font-size: 19px;
             }
        }
       @media only screen and (max-width:959px){
        html{
           font-size: 15px;
         }
          ul li{
           width: 50%;
           }
           .pox{
               font-size: 20px;
           }
       }
       @media only screen and (max-width:767px){
        html{
           font-size: 12px;
         }
         ul li{
           width: 100%;
           float: none;
            }
             .pox{
               font-size:12px;
           }
       }

       .dn{
           display: none;
       }


    /*html{
        font-size: 20px;
    }*/
    /*.box{
        box-sizing: border-box;
       width: 100%;
        height: 26.9rem; 乘以根元素10px
        background: url(images/caodi.png) no-repeat center top ;
       -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }   */
    </style>
</head>
<body>
     <div class="pox">
     hello,world!
</div>
<div class="box">
      <ul class="ul-Pic TAB" id=".show">
            <li><img src="images/banner1.png" alt="" ></li>
            <li><img src="images/banner2.png" alt="" ></li>
            <li> <img src="images/banner3.png" alt=""></li>
     </ul>
</div>
<div class="show">
      <dl>
          <dt>001</dt>
          <img src="images/g1.jpg" alt="">
      </dl>
</div>
<div class="show dn">
       <dl>
          <dt>002</dt>
          <img src="images/g4.jpg" alt="">
      </dl>
</div>
<div class="show dn">
       <dl>
          <dt>003</dt>
          <img src="images/g3.jpg" alt="">
      </dl>
</div>

<script src="js/jquery.js"> </script>

<script>
// 鼠标经过选项卡
       $(".TAB li").mousemove(function(){
            var $vv=$(this).parent(".TAB").attr("id");
            $($vv).hide();
            $(this).parent(".TAB").find("li").removeClass("hover");
            var xx=$(this).parent(".TAB").find("li").index(this);
            $($vv).eq(xx).show();
            $(this).addClass("hover");
        });

// 鼠标点击选项卡
        // $(".TAB_CLIKE li").click(function(){
        //             var $vv=$(this).parent(".TAB").attr("id");
        //             $($vv).hide();
        //             $(this).parent(".TAB").find("li").removeClass("hover");
        //             var xx=$(this).parent(".TAB").find("li").index(this);
        //             $($vv).eq(xx).show();
        //             $(this).addClass("hover");
        //         });
</script>
</body>
</html>

转载于:https://www.cnblogs.com/liaoliao985786516/p/5585534.html

weixin_30911809

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> *{margin: 0;padding: 0;} ul li{ padd...
复制链接

扫一扫