tab響應式轉場效果，tab響應切換

最後更新：2015-01-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

tab響應式轉場效果，tab響應切換

實現tab響應式轉場效果，利用js對樣式進行動態切換即可。多的不說，請看代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>tab響應式轉場效果</title><link rel="stylesheet" href="css/tab.css"><script type="text/javascript" src="js/jquery.js"></script></head><body><!-- 代碼部分begin --><div class="wrap" height="100%">    <div class="tabs" height="20%">        <a href="#"  class="active">tab1</a>        <a href="#" >tab2</a>        <a href="#" >tab3</a>    </div>        <div class="swiper-container" height="80%">        <div class="swiper-wrapper">        <div class="swiper-slide">           <div class="content-slide contentin" id="contentref1">            tab內容一          </div>          </div>        <div class="swiper-slide">            <div class="content-slide" id="contentref2">             tab內容二            </div>          </div>        <div class="swiper-slide">            <div class="content-slide" id="contentref3">             tab內容三            </div>          </div>      </div>   </div></div><script>//$("#contentref1").load("CheckRecord1.html"); //初始化載入tab1$(".tabs a").each(function(index){//每一個封裝a的jquery對象都會執行function中的代碼//index是當前執行這個function代碼的li對應在所有li組成的數組中的索引值//有了index的值之後，就可以找到當前標籤對應的內容地區$(this).click(function(){var liNode = $(this);//將原來顯示的內容地區進行隱藏$(".tabs .active").removeClass("active");//對有tabin的class定義的li清除tabin的class$(".contentin").removeClass("contentin");//當前標籤所對應的內容地區顯示出來$("div").eq(index).addClass("contentin");$("div.content-slide:eq(" + index + ")").addClass("contentin");liNode.addClass("active");if (index == 0) {//裝入靜態完成頁面//$("#contentref1").load("CheckRecord1.html");} else if (index == 1) {//裝入動態部分頁面//$("#contentref2").load("CheckRecord.jsp");} else if (index == 2) {//裝入遠端資料（這裡也是一個動態網頁面輸出的資料）//$("#contentref1").load("TabData.jsp")}});});</script><!-- 代碼部分end --></body></html>

tab.css

body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;}.wrap{margin:0 auto 0 auto;}.tabs{height:25px;}.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;}.tabs a.active{color:#fff;background:#CDC8B1;border-radius:5px 5px 0px 0px;}.swiper-container{background:#CDC8B1;height:100%;border-radius:0 0 5px 5px;width:100%;border-top:0;}.swiper-slide{height:100%;width:100%;background:none;color:#fff;}div.content-slide {padding:40px;display: none;}div.contentin {display: block;}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More