css+Jquery建立Tab轉場效果:
效果如圖:
建立代碼如下:
注:在測試該代碼前,應將jquery.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> <title>無標題頁</title> <script src="../Js/jquery.js" type="text/javascript"></script> <style type="text/css"> * { padding:0px; margin:0px; font-size:12px; } .tabPanel { margin-bottom:10px; width:400px; } ul.tabs { background:black url(../Images/bg_tab.gif) repeat-x scroll 0 0; border-right:1px solid #DEDEDE; height:28px; line-height:28px; overflow:hidden; } ul.tabs li { float:left; } .selected { color:Green; background:transparent url(../Images/bg_tab_selected.gif) no-repeat scroll 0 0; border-left:0 none; border-right:1px solid #A4B2BD; } ul.tabs li a { border-left:1px solid #DEDEDE; color:#111111; display:block; float:left; outline-color:-moz-use-text-color; outline-style:none; outline-width:medium; padding:0 10px; text-decoration:none; } .panelPadding { background-color:Maroon; border-width:0 1px 1px; border-color:-moz-use-text-color #A4B2BD #A4B2BD; border-style:none solid solid; overflow:hidden; } .panelTable { } .panelPadding img { width:100%; height:300px; } </style> <script type="text/javascript"> /*點擊Tab切換動態載入資料*/ function loadData(tabIndex) { $("#panelPadding1 .panelTable").html(""); var t=$("#tabPanel1 .selected"); $("#panelPadding1 .panelTable").append("<img src='"+t[0].title+"' title='"+t.html()+"' /> "); //<img src='"+t[0].title+"' title='"+t[0].html()+"' /> } //tabPanel組件用於切換tab的動作 function tabSwitch(itemID,pannelID) { var tabBtn=$("#"+pannelID+" .tabs a"); for(var i=0;i<tabBtn.length;i++) { if(tabBtn[i].id==itemID) { tabBtn[i].className="selected"; } else { tabBtn[i].className=""; } } } $(function(){ $("#panelPadding1 .panelTable").append("<img src='../Images/U10P1T1D126887F9DT20081215151307.jpg' /> "); //<img src='"+t[0].title+"' title='"+t[0].html()+"' /> }); </script></head><body> <div style="margin-left:200px;margin-top:100px;"> <div id="tabPanel1" class="tabPanel"> <ul class="tabs"> <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('0');" href="###" id="item0" title="../Images/U10P1T1D126887F9DT20081215151307.jpg"> 圖片一</a></li> <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('1');" href="###" id="item1" title="../Images/2feba09120a4bee45656e142d298cc06.jpg"> 圖片二</a></li> <li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('2');" href="###" id="item2" title="../Images/4.jpg"> 圖片三</a></li> </ul> <div id="panelPadding1" class="panelPadding"> <div class="panelTable" id="resultTable"> </div> </div> </div> </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
