jQueryTab封装库，内含动画版选项卡及滑动门本JavascriptUI库是基于jQuery的扩展，完成jQueryTab功能，已封装成库，使用非常方便，内含动画版的选项卡及滑动门，当前很流行的网页设计模式，风格越简洁，当然你可以根据你的网页整体风格修改，鼠标放到滑动门菜单上，内容渐渐变化，用户对操作的体验比普通的要好一点。资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

jQuery

Tab封装库，内含动画版选项卡及滑动门

本Javascript

UI库是基于jQuery的扩展，完成jQuery

3星 · 超过75%的资源需积分: 10 45 浏览量 2010-03-02 12:25:42 上传评论收藏 22KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

tab.rar （4个子文件）

codefans.net

tab

style

style.css 1KB

default.html 5KB

script

jquery-1.3.2.min.js 56KB

ui.tab.js 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tab Demo by http://www.codefans.net</title> </head> <link rel="stylesheet" type="text/css" href="style/style.css" /> <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="script/ui.tab.js"></script> <script type="text/javascript"> $(document).ready(function(){ var tab = new $.fn.tab({ tabList:"#demo1 .ui-tab-container .ui-tab-list li", contentList:"#demo1 .ui-tab-container .ui-tab-content" }); $("#btn_set_disable").click(function(){ tab.setDisable(2); }); $("#btn_set_enable").click(function(){ tab.setEnable(2); }); $("#btn_triggle").click(function(){ tab.triggleTab(1); }); var tab1 = new $.fn.tab({ tabList:"#demo2 .ui-tab-container .ui-tab-list li", contentList:"#demo2 .ui-tab-container .ui-tab-content", eventType:"mouseover", showType:"fade" }); var tab2 = new $.fn.tab({ tabList:"#demo3 .ui-tab-container .ui-tab-list li", contentList:"#demo3 .ui-tab-container .ui-tab-content", showType:"slide" }); var tab4 = new $.fn.tab({ tabList:"#demo4 .ui-tab-container .ui-tab-list li", contentList:"#demo4 .ui-tab-container .ui-tab-content", showType:"slide", callBackStartEvent:function(index){ alert(index); }, callBackHideEvent:function(index){ alert("hideEvent"+index); }, callBackShowEvent:function(index){ alert("showEvent"+index); } }); }); </script> <body> <div id="demo1"> <p>默认</p> <div class="ui-tab-container"> <ul class="clearfix ui-tab-list"> <li class="ui-tab-active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="ui-tab-bd"> <div class="ui-tab-content"><p>content1</p><p>content1</p><p>content1</p></div> <div class="ui-tab-content" style="display:none"><p>content2</p><p>content2</p><p>content2</p></div> <div class="ui-tab-content" style="display:none"><p>content3</p><p>content3</p><p>content3</p></div> </div> <input type="button" id="btn_set_disable" value="禁用第三个tab" /> <input type="button" id="btn_set_enable" value="启用第三个tab" /> <input type="button" id="btn_triggle" value="触发第二个tab" /> </div> </div> <br /><br /> <div id="demo2"> <p>改为mouseover触发</p> <div class="ui-tab-container"> <ul class="clearfix ui-tab-list"> <li class="ui-tab-active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="ui-tab-bd"> <div class="ui-tab-content"><p>content1</p><p>content1</p><p>content1</p></div> <div class="ui-tab-content" style="display:none"><p>content2</p><p>content2</p><p>content2</p></div> <div class="ui-tab-content" style="display:none"><p>content3</p><p>content3</p><p>content3</p></div> </div> </div> </div> <div id="demo3"> <p>改为slide方式显示</p> <div class="ui-tab-container"> <ul class="clearfix ui-tab-list"> <li class="ui-tab-active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="ui-tab-bd"> <div class="ui-tab-content"><p>content1</p><p>content1</p><p>content1</p></div> <div class="ui-tab-content" style="display:none"><p>content2</p><p>content2</p><p>content2</p></div> <div class="ui-tab-content" style="display:none"><p>content3</p><p>content3</p><p>content3</p></div> </div> </div> </div> <div id="demo4"> <p>回调函数</p> <div class="ui-tab-container"> <ul class="clearfix ui-tab-list"> <li class="ui-tab-active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="ui-tab-bd"> <div class="ui-tab-content"><p>content1</p><p>content1</p><p>content1</p></div> <div class="ui-tab-content" style="display:none"><p>content2</p><p>content2</p><p>content2</p></div> <div class="ui-tab-content" style="display:none"><p>content3</p><p>content3</p><p>content3</p></div> </div> </div> </div> </body>  </html>

评论收藏

内容反馈