jquery外掛程式tytabs.jquery.min.js實現漸層TAB選項卡效果_jquery

本文執行個體講述了jquery外掛程式tytabs.jquery.min.js實現漸層TAB選項卡效果。分享給大家供大家參考。具體如下：

這款網頁特效主要是tytabs.jquery.min.js外掛程式的執行個體示範，一個帶有漂亮漸層效果的TAB選項卡，示範了一個網頁上設定兩個選項卡，都是帶有淡入淡出的漸層效果，為了示範效果，裡面我隨便弄了些文字，用時候自己刪除吧。

運行效果截圖如下：

線上示範地址如下：

http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-menu-style-codes/

具體代碼如下：

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery tab選項卡切換</title><script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/tytabs.jquery.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){ $("#tabsholder").tytabs({  tabinit:"2",  fadespeed:"fast" }); $("#tabsholder2").tytabs({  prefixtabs:"tabz",  prefixcontent:"contentz",  classcontent:"tabscontent",  tabinit:"3",  catchget:"tab2",  fadespeed:"normal" });});--></script><style>*{padding: 0;margin: 0;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 12px;}html, body{background-color: #2f2f2f;color: #eaeaea;}img{border: none;}.center{width: 400px;margin-left: auto;margin-right: auto;}.centerText{text-align: center;}a{color: #baee00;text-decoration: none;}a: link{color: #baee00;}a: visited{color: #baee00;}a: hover{color: #baee00;text-decoration: underline;}a: active{color: #baee00;}.center{width: 60%;margin: 20px auto 0 auto;}.marginbot{margin-bottom: 15px;}ul.list li{list-style-type: none;margin-left: 20px;}ul.tabs{width: 100%;overflow: hidden;}ul.tabs li{list-style-type: none;display: block;float: left;color: #fff;padding: 8px;margin-right: 2px;border-bottom: 2px solid #2f2f2f;background-color: #1f5e6f;-moz-border-radius: 4px 4px 0 0;-webkit-border-radius: 4px 4px 0 0;cursor: pointer;}ul.tabs li: hover{background-color: #43b0ce;}ul.tabs li.current{border-bottom: 2px solid #43b0ce;background-color: #43b0ce;padding: 8px;}.tabscontent{border-top: 2px solid #43b0ce;padding: 8px 0 0 0;display: none;width: 100%;text-align: justify;}</style></head><body><div class="center"> <p> </p> <!-- Tabs --> <div id="tabsholder"> <ul class="tabs">  <li id="tab1">Spiderman</li>  <li id="tab2">Batman</li>  <li id="tab3">Hulk</li>  <li id="tab4">Daredevil</li> </ul> <div class="contents marginbot">  <div id="content1" class="tabscontent">  雲棲社區（www.jb51.net）提供指令碼源碼、編程源碼、網站源碼、網頁素材、書籍教程、網站模板、網頁特效代碼等，做有品質的學習型源碼下載站。  </div>  <div id="content2" class="tabscontent">  Donec eu velit ante, non dapibus nibh. Praesent condimentum ipsum eu ligula elementum pretium. Nullam vel mi odio, non tincidunt lorem. Etiam pulvinar eleifend velit non ornare. Etiam neque ante, posuere vitae bibendum ac, varius non augue. Sed cursus commodo dapibus. Nullam sed feugiat dolor. Praesent interdum elementum scelerisque. Etiam tincidunt lectus et nulla suscipit ut scelerisque elit egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  </div>  <div id="content3" class="tabscontent">HTML5技術結合jquery實現的自動產生縮圖程式，產生後排成一行，類似圖片牆的效果，所以可以用在圖片牆的效果中，HTML5效果也..一個html5實現的顯示百分比的簡潔漂亮的進度條特效，沒有使用圖片，HTML5超漂亮進度條特效代碼，相信你會喜歡的。用到了HTML5..HTML5登入介面模板，jQuery+CSS3實現了超炫的外光暈火焰特效，表單文字框帶有預設文字效果，可作為一個管理員登入介面模板來完.CSS3多級導覽功能表，表徵圖菜單，圓角菜單，CSS3了不得啊，不知道一點貌似要OUT了，搞前端的更不能不看了。因為CSS3的每一款東西..   </div>  <div id="content4" class="tabscontent">   一個絕對不容錯過的CSS3特效，收集了90款漂亮的CSS3按鈕樣式集，全部通過樣式定義的50個圓角漸層效果的網頁按鈕，紅、黃、藍、.   </div> </div> </div> <!-- /Tabs --> <!-- Tabs2 --> <div id="tabsholder2"> <ul class="tabs">  <li id="tabz1">Captain America</li>  <li id="tabz2">X-men</li>  <li id="tabz3">Iron man</li>  <li id="tabz4">Fantastic Four</li> </ul> <div class="contents marginbot">  <div id="contentz1" class="tabscontent">  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vel sem risus. Aenean vulputate, dui quis dignissim scelerisque, magna justo dapibus diam, a luctus justo lectus non orci. Donec aliquam risus sed nisl vulputate volutpat. Etiam molestie erat quis augue lobortis volutpat. Curabitur a tortor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc hendrerit malesuada luctus. Proin at tellus feugiat nisl gravida blandit in nec erat. Sed varius, neque sit amet scelerisque vestibulum, augue eros hendrerit sapien, non imperdiet est ante in ipsum. Suspendisse ornare metus et velit rhoncus sodales   </div>  <div id="contentz2" class="tabscontent">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante arcu, lacinia quis varius vel, pharetra eu sapien. Nulla dictum tincidunt nunc gravida congue. Quisque scelerisque, nulla ut sollicitudin lobortis, urna neque dapibus sem, quis congue tellus purus id nibh. Pellentesque congue massa ac quam rhoncus posuere.  </div>  <div id="contentz3" class="tabscontent">  jquery實現的自動產生縮圖程式，產生後排成一行，類似圖片牆的效果，所以可以用在圖片牆的效果中，HTML5效果也..一個html5實現的顯示百分比的簡潔漂亮的進度條特效，沒有使用圖片，HTML5超漂亮進度條特效代碼，相信你會喜歡的。  </div>  <div id="contentz4" class="tabscontent">  Nam sed tellus metus. Nunc sem neque, mollis ac tempor sed, rhoncus vitae orci. Praesent vel tellus in felis condimentum ultrices eget at lectus. Donec aliquam, nunc et feugiat sagittis, nulla metus scelerisque risus, in eleifend magna diam vitae turpis. Proin cursus sagittis tellus sed iaculis. Nam tincidunt, augue ornare posuere dignissim, tellus velit vehicula massa, eu molestie ipsum quam sit amet nibh. Curabitur semper auctor leo eu elementum.  </div> </div> </div> <!-- /Tabs2 --></div></body></html>

希望本文所述對大家的jquery程式設計有所協助。