jQuery tab插件使用说明

实例一

jQuery tab插件 结构：

 代码如下 复制代码

<div class="tabWrap">  
<ul class="tabBox">  
<li><a href="#nogo">tab1 </a></li>  
<li><a href="#nogo">tab2 </a></li>  
<li><a href="#nogo">tab3 </a></li>  
<li><a href="#nogo">tab4 </a></li>  
<li><a href="#nogo">tab5 </a></li>  
</ul>  
<div class="tabContent">  
<div class="tcon">1111</div>  
<div class="tcon">2222</div>  
<div class="tcon">3333</div>  
<div class="tcon">4444</div>  
<div class="tcon">5555</div>  
</div>  
</div>

jQuery tab插件 插件代码：

 代码如下 复制代码
$(function () {
$.fn.tabs = function (options) {
var settings = {
tabList: "",
tabContent: "",
tabOn:"",
action: ""
};
var _this = $(this);
if (options) $.extend(settings, options);
_this.find(settings.tabContent).eq(0).show(); //第一栏目显示
_this.find(settings.tabList).eq(0).addClass(settings.tabOn);
if (settings.action == "mouseover") {
_this.find(settings.tabList).each(function (i) {
$(this).mouseover(function () {
$(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn);
var _tCon = _this.find(settings.tabContent).eq(i);
_tCon.show().siblings().hide();
}); //滑过切换
});
}
else if (settings.action == "click") {
_this.find(settings.tabList).each(function (i) {
$(this).click(function () {
$(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn);
var _tCon = _this.find(settings.tabContent).eq(i);
_tCon.show().siblings().hide();
}); //点击切换
});
};
};

//调用方式：

 代码如下 复制代码
$(".tabWrap").tabs({
tabList: ".tabBox li",  //tab list
tabContent: ".tabContent .tcon", //内容box
tabOn:"on", //当前tab类名
action: "mouseover" //事件，mouseover或者click
});
});

实例二

html代码

 代码如下 复制代码

<div class="tab">
<ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul>
<ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul>
</div>
 
<div class="tab">
<ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul>
<ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul>
</div>

css代码

 代码如下 复制代码
ul,li{ list-style:none;}
.tab{ width:450px; margin:0 auto 50px;}
.tab-hd { background:#F93; overflow:hidden; zoom:1;}
.tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
.tab-hd li.active{ background:#F60;}
.tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}

 
 
jquery代码

 代码如下 复制代码

$(function(){
 function tabs(tabTit,on,tabCon){
   $(tabCon).each(function(){
      $(this).children().eq(0).show();
   });
 $(tabTit).each(function(){
     $(this).children().eq(0).addClass(on);
 });
  $(tabTit).children().hover(function(){
        $(this).addClass(on).siblings().removeClass(on);
         var index = $(tabTit).children().index(this);
         $(tabCon).children().eq(index).show().siblings().hide();
    });
     }
  tabs(".tab-hd","active",".tab-bd");
   });
时间： 2024-09-20 13:55:23

jQuery tab插件使用说明的相关文章

jQuery TAB插件之TAB选项卡实现实例

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果.插件力求简单易用,只要能实现常见的功能即可. 参数说明: •event •触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover. •timeout •事件延迟,单位为毫秒,默认为0. •auto •自动切换,单位为毫秒,默认为0. •callback •回调函数,触发TAB时执行,函数的参数返回的是this. html代码  代码如下 复制代码 <DIV id=box>  <!-

jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明_jquery

作者: think8848(公司主页: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com)  转载请保留此信息 CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI样式版本:1.8.13:其功能为创建jQuery UI风格的Tab用于显示iframe. 本示例中符加了jQuery.contextMenu插件,我修改了其样式,使用了jQuery UI的

jquery tab插件制作实现代码_jquery

jquery插件的基本格式: 复制代码 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称.可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 我这里是做一个tab的插件,我来完善以上代码

jquery tab插件精简版分享_jquery

复制代码 代码如下: /* * jqpressToos1.0 * * Copyright (c) 2011 yepeng * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * */ $.fn.extend({ //插件名称:Tab选项卡 jqpressTab: function(options) { //参数和默认值 var defaults = { _tabClass: n

漂亮的jQuery tab选项卡插件

jQuery tab插件 结构:  代码如下 复制代码 <div class="tabWrap">   <ul class="tabBox">   <li><a href="#nogo">tab1 </a></li>   <li><a href="#nogo">tab2 </a></li>   <li&

Jquery 日期选择器插件使用说明

这个jQuery插件可以帮助开发者提供一个快速的日期选择器(如下图),帮助开发者简单的实现日期选择,让使用用户无需自己填写日期就可以插入日期.   官网:http://jonathanleighton.com/projects/date-input/ 中文支持:  代码如下 复制代码 jQuery.extend(DateInput.DEFAULT_OPTS,{  month_names: ["一月", "二月", "三月", "四月&q

webjx收集45个jQuery导航插件和教程

45个jQuery 导航插件及教程.新用户访问一个网站的最初15-20妙会对他们对网站的喜好影响很大,促使他们决定去留.所以开发一个直观易用,风格恰当的导航帮助用户开始是非常重要的.这篇文章列出的这些教程不仅体现了jQuery的强大,也展示了导航创意设计的众多可能. Horizontal Menu Navigation Plugins and Tutorials Mega Drop Down Menu w/ CSS & jQuery DemoAccording to usability expe

jQuery tab切换

jQuery tab切换,如下代码: (function($){        $.HoverTabs=function(options){            var ops=$.extend($.HoverTabs.defaults,options);            this.tabs=ops.tabs;            this.tabContents=ops.tabContents;            this.curIndex=0;            this.

jQuery提示插件alertify使用指南

  jQuery提示插件alertify使用指南           alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文