20160614 html5学习代码(选项卡)

Posted 唯一的liaoliao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20160614 html5学习代码(选项卡)相关的知识,希望对你有一定的参考价值。

<!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" ></li>
            <li><img src="images/banner2.png" ></li>
            <li> <img src="images/banner3.png" ></li>
     </ul>
  </div>
  <div class="show">
      <dl>
          <dt>001</dt>
          <img src="images/g1.jpg" >
      </dl>
  </div>
  <div class="show dn">
       <dl>
          <dt>002</dt>
          <img src="images/g4.jpg" >
      </dl>
  </div>
  <div class="show dn">
       <dl>
          <dt>003</dt>
          <img src="images/g3.jpg" >
      </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>

以上是关于20160614 html5学习代码(选项卡)的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 开发APP(头部和底部选项卡)

每天学一个jquery插件-外卖选项卡

HTML5 <audio> 标签 - 自动播放,即使选项卡没有焦点

html5本地存储应用实例,刷新后选项卡停留在点开页面

tooltip标签页(选项卡)插件

JAVAEE——BOS物流项目02:学习计划动态添加选项卡ztree项目底层代码构建