Comment utiliser js pour implémenter le changement de formulaire d'onglet par clic de souris-js tutoriel-php.cn

Comment utiliser js pour implémenter le changement de formulaire d'onglet par clic de souris

php中世界最好的语言

Libérer： 2018-05-29 11:16:08

original

1776 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser js pour réaliser un changement de forme d'onglet avec un clic de souris. Quelles sont les précautions pour utiliser js pour réaliser un changement de forme d'onglet avec un clic de souris. . Jetons un coup d'oeil.

Code :

<!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> 
  <p 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> 
    <p 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>    
    </p> 
   </p> 
   <script type="text/javascript"> 
    function $(id){ 
    var lis = document.getElementsByTagName('li'); 
    for (var i = 0; i < lis.length; i++) { 
     lis[i].setAttribute(&#39;class&#39;,&#39;&#39;); 
    }; 
    id.setAttribute(&#39;class&#39;,&#39;select&#39;); 
    var ele = document.getElementById(&#39;tab-panel&#39;); 
    ele.style.left=-(id.id-1)+&#39;00%&#39;; 
    } 
   </script> 
 </body> 
</html>

Copier après la connexion

Rendu :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, s'il vous plaît venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser JS pour implémenter l'impression de pagination

Comment mettre à jour la dernière version de nodejs dans mac

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!