js如何實現(xiàn)鼠標單擊Tab表單切換效果

這篇文章給大家分享的是有關js如何實現(xiàn)鼠標單擊Tab表單切換效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)：2013年至今為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設”服務，為數(shù)千家公司企業(yè)提供了專業(yè)的成都網(wǎng)站設計、網(wǎng)站建設、網(wǎng)頁設計和網(wǎng)站推廣服務，按需求定制設計由設計師親自精心設計，設計的效果完全按照客戶的要求，并適當?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構架，制作客戶同行業(yè)具有領先地位的。

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

具體內(nèi)容如下

代碼：

<!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如何實現(xiàn)鼠標單擊Tab表單切換效果

感謝各位的閱讀！關于“js如何實現(xiàn)鼠標單擊Tab表單切換效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：js如何實現(xiàn)鼠標單擊Tab表單切換效果
標題URL：http://www.rwnh.cn/article48/gopihp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、網(wǎng)站維護、、小程序開發(fā)、電子商務、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

js如何實現(xiàn)鼠標單擊Tab表單切換效果

JS是什么