jQuery简单Tabs标签插件
/* jQuery简单Tabs标签插件by ~Wanghtml:<div id="tabs"><div class="tab_title"><ul><li class="li_curr">Tabs效果</li><li>jQuery插件</li></ul></div><div class="tab_content"><ul><li>是一个简单易用的 jQuery 的 Tab 插件。 </li><li>jerichoTab是一款模拟 firefox 标签页的插件, </li><li>jQuery UI 1.7.2 - ui.core.js and ui.tabs.js 在线演示...</li><li>JQuery TabContainer Theme-一个JQuery的Tab选项卡内容</li><li>jQuery Smooth Tabs是一个简单易于使用的插件，</li></ul><ul style="display:none"><li>KandyTabs选项卡以HTML标准及用户体验为指导思想</li><li>有7种效果2种样式可供选择。tabSwitch可以自动或手动播放每一个tab/slide。</li><li>wdScrollTab is a tab panel which has ability to scroll for tabs that do not fit on the page</li><li>A simple jquery plugin that does auto tab</li></ul></div></div>css:* { margin:0; padding:0; }ul { list-style:none; }body { color:#333; font-size:12px; }#tabs { margin:100px auto auto auto; width:500px; }#tabs .tab_title { width:500px; }#tabs .tab_title ul { width:500px; overflow:hidden; zoom:1; }#tabs .tab_title ul li { float:left; margin-right:2px; width:80px; height:26px; background-color:#EEE; border:1px solid #DDD; border-bottom:none; line-height:26px; text-align:center; }#tabs .tab_title ul .li_curr { background-color:#FFF; }#tabs .tab_content { padding:4px; width:490px; border:1px solid #DDD; border-top:none; }#tabs .tab_content ul { padding:0 5px; width:480px; height:140px; }#tabs .tab_content ul li { width:480px; height:28px; line-height:28px; overflow:hidden; }js:$( function() {$('#tabs').wTabs();}); */( function($) {$.fn.wTabs = function() {var li_curr = 'li_curr';//定义当前标签样式var curr_index = 0;//当前激活标签序号var tab_title = $('div:eq(0)', this);var tab_content = $('div:eq(1)', this);//定义对象$('ul li', tab_title).mouseover( function(){curr_index = $(this).index();//定义当前索引$('ul li', tab_title).removeClass(li_curr);$(this).addClass(li_curr);//激活当前标签$('ul', tab_content).hide();$('ul:eq('+curr_index+')', tab_content).show();//显示当前内容});}})(jQuery);
页:
[1]