jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果
更新時間：2015年08月25日 11:04:55 作者：企鵝
這篇文章主要介紹了jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果,實例分析了tytabs.jquery.min.js插件實現(xiàn)tab選項卡切換效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery插件tytabs.jquery.min.js實現(xiàn)漸變TAB選項卡效果。分享給大家供大家參考。具體如下：
這款網(wǎng)頁特效主要是tytabs.jquery.min.js插件的實例演示，一個帶有漂亮漸變效果的TAB選項卡，演示了一個網(wǎng)頁上設置兩個選項卡，都是帶有淡入淡出的漸變效果，為了演示效果，里面我隨便弄了些文字，用時候自己刪除吧。
運行效果截圖如下：
在線演示地址如下：
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.dbjr.com.cn）提供腳本源碼、編程源碼、網(wǎng)站源碼、網(wǎng)頁素材、書籍教程、網(wǎng)站模板、網(wǎng)頁特效代碼等，做有質(zhì)量的學習型源碼下載站。
</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技術(shù)結(jié)合jquery實現(xiàn)的自動生成縮略圖程序，生成后排成一行，類似圖片墻的效果，所以可以用在圖片墻的效果中，HTML5效果也..一個html5實現(xiàn)的顯示百分比的簡潔漂亮的進度條特效，沒有使用圖片，HTML5超漂亮進度條特效代碼，相信你會喜歡的。用到了HTML5..HTML5登錄界面模板，jQuery+CSS3實現(xiàn)了超炫的外發(fā)光火焰特效，表單文本框帶有默認文字效果，可作為一個管理員登錄界面模板來完.CSS3多級導航菜單，圖標菜單，圓角菜單，CSS3了不得啊，不知道一點貌似要OUT了，搞前端的更不能不看了。因為CSS3的每一款東西..
</div>
<div id="content4" class="tabscontent">
一個絕對不容錯過的CSS3特效，收集了90款漂亮的CSS3按鈕樣式集，全部通過樣式定義的50個圓角漸變效果的網(wǎng)頁按鈕，紅、黃、藍、.
</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實現(xiàn)的自動生成縮略圖程序，生成后排成一行，類似圖片墻的效果，所以可以用在圖片墻的效果中，HTML5效果也..一個html5實現(xiàn)的顯示百分比的簡潔漂亮的進度條特效，沒有使用圖片，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程序設計有所幫助。
您可能感興趣的文章:
- JavaScript插件Tab選項卡效果
- JavaScript tab選項卡插件實例代碼
- js實現(xiàn)簡單選項卡功能
- js實現(xiàn)簡單的可切換選項卡效果
- js選項卡的實現(xiàn)方法
- javascript實現(xiàn)tabs選項卡切換效果(自寫原生js)
- JS實現(xiàn)選項卡實例詳解
- 使用vue.js寫一個tab選項卡效果
- Vue.js組件tabs實現(xiàn)選項卡切換效果
- 原生js實現(xiàn)tab選項卡切換
- js實現(xiàn)tab選項卡函數(shù)代碼
- Vue.js組件tab實現(xiàn)選項卡切換
- JS實現(xiàn)選項卡插件的兩種寫法（jQuery和class）
相關(guān)文章
jQuery插件jPaginate實現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。2015-05-05
JQuery 構(gòu)建客戶/服務分離的鏈接模型中Table中的排序分析
從上篇文章，我們實現(xiàn)了Table分頁代碼的高效性，咱們繼續(xù)沿著這個思路，探討Table表格數(shù)據(jù)中另外一個很常見的排序問題。說到排序，我記得在asp.net中 GridView中提供了這樣的方便，只需在展示字段上加上 Sorting 這樣的屬性，基本就完成了，剩下就是服務端cs代碼的寫法了。2010-01-01
這篇文章主要介紹了jQuery實現(xiàn)的AJAX簡單彈出層效果代碼,涉及jQuery響應鼠標事件動態(tài)操作頁面元素實現(xiàn)彈出層效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
今天在修整博客側(cè)欄信息時，利用到了Tab選項卡方式，因為ZBlog封裝的是JQuery庫，所以很自然地就想到了IdTabs。2010-09-09
使用jquery真的很方便，比如要控制div的顯示與隱藏，一句話就搞定了，請看下面使用說明。2011-07-07
這篇文章給大家總結(jié)了jQuery UI實現(xiàn)動畫效果的實例代碼，有需要的朋友們可以參考測試下。2018-08-08
本文給大家分享的是javascript實現(xiàn)簡單的日期輸入格式化控件的方法和思路，非常的細致實用，推薦給小伙伴們2015-03-03
火狐4、谷歌12不支持Jquery Validator的解決方法分享
在火狐4、谷歌12瀏覽器中，使用jquery.tools.min 1.2.5版的Jquery Validator，不出現(xiàn)驗證提示框。在ie7、8、9下就好用。2011-06-06
jquery 插件開發(fā)方法，需要的朋友可以參考下。2009-10-10
使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中，使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果.2011-03-03