Heim > Artikel > Web-Frontend > So verwenden Sie js, um den Mausklick-Tab-Formularwechsel zu implementieren

So verwenden Sie js, um den Mausklick-Tab-Formularwechsel zu implementieren

php中世界最好的语言Original: 2018-05-29 11:16:081722Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit js den Tab-Formularwechsel per Mausklick realisieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von js, um den Tab-Formularwechsel per Mausklick zu realisieren . Werfen wir einen Blick darauf.

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>

Rendering:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Dinge, bitte achten Sie auf PHP Andere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

So verwenden Sie JS zum Implementieren des Paging-Drucks

So aktualisieren Sie die neueste Version von nodejs in mac

Das obige ist der detaillierte Inhalt vonSo verwenden Sie js, um den Mausklick-Tab-Formularwechsel zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So betreiben Sie das öffentliche Koa2 WeChat-Konto, um eine Nachrichtenverwaltung zu erreichenNächster Artikel：So betreiben Sie das öffentliche Koa2 WeChat-Konto, um eine Nachrichtenverwaltung zu erreichen

In Verbindung stehende Artikel

Mehr sehen