漂亮的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  
});  
});

小提示

本文章未提供jquery库文件，大家可到官方下载最新版本的。

时间： 2024-09-20 16:44:21

漂亮的jQuery tab选项卡插件的相关文章

JavaScript tab选项卡插件实例代码_javascript技巧

今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式. 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用函数写法的代码: tab.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http

jQuery网页选项卡插件rTabs用法实例分析_jquery

本文实例讲述了jQuery网页选项卡插件rTabs用法.分享给大家供大家参考.具体如下: 这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行.无动画效果.Hover事件:第二种:自动运行.向上滚动.支持Hover事件的TAB选项卡菜单:第三种:自动运行.渐入淡出.支持Hover事件的选项卡:第四种:自动运行.向左滚动.点击事件的网页选项卡,选一个你喜欢的放在你的网站吧. 先来看看运行效果截图: 在线演示地址如下: http://demo.

jquery tab选项卡切换实例

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html>     <head>         <meta http-equiv="content-type" content="text/html;

基于JQuery的6个Tab选项卡插件_jquery

顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

jQuery封装的tab选项卡插件分享

    本文给大家分享的是个人封装的tab选项卡特效的插件,十分的简单实用,附上用法和示例,有需要的小伙伴可以参考下. 在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 创建选项卡组件 使用方法: html结构 ? 1 2 3 4 5 6 7 8 9 10 <div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a><

二款实例Jquery tab选项卡效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

jQuery Tab切换插件Tabulous.js使用示例

关于Tabulous.js Tabulous.js 是一个实现了Tab标签切换功能的 jQuery 插件,轻量级插件,简单且易于使用.它所生成的Tab标签可通过 CSS 来自定义样式,同时它也提供了多种切换效果. 如何使用Tabulous.js 首先在页面中加入 jQuery 框架和 Tabulous.js 插件  代码如下 复制代码 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script src="

JQuery Tab选项卡效果代码改进版_jquery

介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque

jquery tab选项卡实现方法

<script language="网页特效"> $(function{ $('div').hide().filter(':first').show();//默认只显示第一个<div>标签中的内容. $('a').click(function(){ $('div').hide(); $('a').removeclass('selected'); $(this).addclass('selected'); $('div').hide().filter(this.h