js实现鼠标单击Tab表单切换效果-偶像资源网

本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset=\"utf-8\" /> 
  <title></title> 
  <style type=\"text/css\"> 
   *{ 
    padding: 0; 
    margin: 0; 
    border:0; 
   } 
   body{ 
    text-align: center; 
   } 
   ul{ 
    list-style: none; 
   } 
   a{ 
    text-decoration: none; 
    color: #ff6666; 
    font-family: Arial; 
   } 
   .tab-container{ 
    width: 398px; 
    height: 200px; 
    border:1px #ffcccc solid; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
   } 
   /*tab-head begin*/ 
   .tab-head{ 
    width: 400px; 
    height:30px; 
    left:0; 
    background: #ffcccc; 
    position: absolute; 
    left:-1px;//这里设置-1是为了li的border与最外层的border重合 
   } 
   .tab-head li{ 
    float:left; 
    height: 29px; 
    line-height: 29px; 
    width: 78px; 
    overflow: hidden; 
    padding: 0 1px; 
    border-bottom: 1px solid #ffcccc; 
    background: #ffeeee; 
   } 
    
   li.select{ 
    background: #fff; 
    padding: 0; 
    border-left: 1px solid #ffcccc; 
    border-right: 1px solid #ffcccc; 
    border-bottom: 1px solid #fff;  
   } 
   /*tab-head end tab-panel begin*/ 
   .tab-panel{ 
    position: relative; 
    width: 100%; 
    height: 85%; 
    top: 15%; 
    -webkit-transition:all 0.01s linear;//切换过渡效果 
   } 
   .tab-panel section{ 
    position: absolute; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
   } 
   #panel-1{ 
    left: 0; 
   } 
   #panel-2{ 
    left: 100%; 
   } 
   #panel-3{ 
    left: 200%; 
   } 
   #panel-4{ 
    left: 300%; 
   } 
   #panel-5{ 
    left: 400%; 
   } 
  </style> 
 </head> 
 <body> 
  <div class=\"tab-container\"> 
    <ul class=\"tab-head\"> 
     <li id=\"1\" class=\"select\" onmousedown=\"$(this)\"><a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >Tab1</a></li> 
     <li id=\"2\" onmousedown=\"$(this)\"><a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >Tab2</a></li> 
     <li id=\"3\" onmousedown=\"$(this)\"><a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >Tab3</a></li> 
     <li id=\"4\" onmousedown=\"$(this)\"><a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >Tab4</a></li> 
     <li id=\"5\" onmousedown=\"$(this)\"><a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >Tab5</a></li> 
    </ul> 
    <div id=\"tab-panel\" class=\"tab-panel\"> 
     <section id=\"panel-1\"><p>这是panel-1</p></section>  
     <section id=\"panel-2\"><p>这是panel-2</p></section>  
     <section id=\"panel-3\"><p>这是panel-3</p></section>  
     <section id=\"panel-4\"><p>这是panel-4</p></section>  
     <section id=\"panel-5\"><p>这是panel-5</p></section>    
    </div> 
   </div> 
   <script type=\"text/javascript\"> 
    function $(id){ 
    var lis = document.getElementsByTagName(\'li\'); 
    for (var i = 0; i < lis.length; i++) { 
     lis[i].setAttribute(\'class\',\'\'); 
    }; 
    id.setAttribute(\'class\',\'select\'); 
    var ele = document.getElementById(\'tab-panel\'); 
    ele.style.left=-(id.id-1)+\'00%\'; 
    } 
   </script> 
 </body> 
</html>

效果图：

js实现鼠标单击Tab表单切换效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

js实现鼠标单击Tab表单切换效果

请登录后发表评论