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; charset=gbk" />
        <title>jquery tab选项卡切换实例</title>
        <link href="img/saas.css教程" rel="stylesheet" type="text/css" />
        <script src="js/jquery.js"></script>
        <script src="js/jquery.tab0.9.js"></script>
        <script language="网页特效" src="js/jquery.mask.js"></script>


    </head>
    <body>
     功能描述：
     1、支持自定义html内容
     2、支持ajax加载内容
     3、回调函数
    <br />
     滑动demo
      <div id="tab_list" style="width:700px">
    </div>
      普通demo
      <div id="tab_list_n">
     </div>
      ajax demo
      <div id="tab_list_a">
     </div>

     动态添加自动显示滑动 demo <input type="button" id="addtab" value="add">
      <div id="tab_list_add">
     </div>

     动态添加不显示滑动 demo <input type="button" id="addtabn" value="add">
      <div id="tab_list_addn">
     </div>
    </body>
</html>
<script>
$(function(){

$("#tab_list").tab({items:[
{title:'tab1',closed:true,icon:'',html:'test1',load:'',callback:function(){}},
{title:'tab22222222',closed:true,icon:'',html:'test2',load:'',callback:function(){alert('click tab2');}},
{title:'tab3',closed:true,icon:'',html:'test3',load:'',callback:function(){}},
{title:'tab4',closed:true,icon:'',html:'test4',load:'',callback:function(){}},
{title:'tab5',closed:true,icon:'',html:'test5',load:'',callback:function(){}},
{title:'tab6',closed:true,icon:'',html:'test6',load:'',callback:function(){}},
{title:'tab7',closed:true,icon:'',html:'test7',load:'',callback:function(){}},
{title:'tab8',closed:true,icon:'',html:'test8',load:'',callback:function(){}},
{title:'tab9',closed:true,icon:'',html:'test9',load:'',callback:function(){}},
{title:'tab10',closed:true,icon:'',html:'test10',load:'',callback:function(){}},
{title:'tab11',closed:true,icon:'',html:'test11',load:'',callback:function(){}},
{title:'tab12',closed:true,icon:'',html:'test12',load:'',callback:function(){}},
{title:'tab13',closed:true,icon:'',html:'test13',load:'',callback:function(){}},
{title:'tab14',closed:true,icon:'',html:'test14',load:'',callback:function(){}},
{title:'tab15',closed:true,icon:'',html:'test15',load:'',callback:function(){}},
{title:'tab16',closed:true,icon:'',html:'test16',load:'',callback:function(){}}
],
width:500,
height:100,
tabcontentwidth:500,
tabwidth:66,
tabheight:25,
tabhtml:'一般用于说明的区域 <img src="img/i_min.gif" type="min"/> <img src="img/i_normal.gif" type="normal" class=""/> <img src="img/i_max.gif" type="max" class=""/>'
});
$("#tab_list_n").tab({items:[
{title:'tab1',closed:true,icon:'',html:'test1',load:'',callback:function(){}},
{title:'tab2',closed:true,icon:'',html:'test2',load:'',callback:function(){}},
{title:'tab3',closed:true,icon:'',html:'test3',load:'',callback:function(){}},
{title:'tab13',closed:true,icon:'',html:'test13',load:'',callback:function(){}},
{title:'tab14',closed:true,icon:'',html:'test14',load:'',callback:function(){}},
{title:'tab15',closed:true,icon:'',html:'test15',load:'',callback:function(){}},
{title:'tab16',closed:true,icon:'',html:'test16',load:'',callback:function(){}}
],
tabscroll:false,
width:500,
height:100,
tabcontentwidth:498,
tabwidth:66,
tabheight:25
});
$("#tab_list_a").tab({items:[
{title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}},
{title:'tab2',closed:true,icon:'',html:'test2',load:'',callback:function(){}},
{title:'tab3',closed:true,icon:'',html:'test3',load:'',callback:function(){}},
{title:'tab13',closed:true,icon:'',html:'test13',load:'',callback:function(){}},
{title:'tab14',closed:true,icon:'',html:'test14',load:'',callback:function(){}},
{title:'tab15',closed:true,icon:'',html:'test15',load:'',callback:function(){}},
{title:'tab16',closed:true,icon:'',html:'test16',load:'',callback:function(){}}
],
tabscroll:false,
width:500,
height:100,
tabcontentwidth:498,
tabwidth:66,
tabheight:25
});
var o=$("#tab_list_add").tab({items:[
{title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}}
],
tabscroll:false,
width:500,
height:100,
tabcontentwidth:498,
tabwidth:66,
tabheight:25
});
$('#addtab').click(function(){
  o.newtab({title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}});
});
var oo=$("#tab_list_addn").tab({items:[
{title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}}
],
tabscroll:false,
width:500,
height:100,
tabcontentwidth:498,
tabwidth:66,
tabheight:25
});
$('#addtabn').click(function(){
  oo.addtab({title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}});
});
});
</script>

源码下载地址

http://down.111cn.net/down/code/jquery/2010/0907/20677.html

时间： 2024-10-12 00:20:08

jquery tab选项卡切换实例的相关文章

jQuery实现Tab选项卡切换效果简单演示_jquery

本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-

jQuery实现TAB选项卡切换特效简单演示_jquery

本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad

jQuery简单实现tab选项卡切换效果_jquery

抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~ 效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps

jQuery实现选项卡切换效果简单演示_jquery

本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c

原生js实现tab选项卡切换_javascript技巧

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

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

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

原生javascript实现Tab选项卡切换功能

本文主要介绍了使用原生javascript实现Tab选项卡切换的功能,虽然jQuery有很多类似的插件,单jQuery库着实有点庞大,这种小功能还是直接用javascript来做就好了. 分析个人用原生JS获取类名元素的代码: 代码如下: getByClassName:function(className,parent){ var elem = [], node = parent != undefined&&parent.nodeType==1?parent.getEleme

很棒的js Tab选项卡切换效果_javascript技巧

本文实例为大家分享了js Tab选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; over

JS基于myFocus库实现各种功能的tab选项卡切换效果_javascript技巧

本文实例讲述了JS基于myFocus库实现各种功能的tab选项卡切换效果.分享给大家供大家参考.具体如下: 这里介绍使用myFocus-tab实现各种功能的选项卡切换,有的是带有动画效果的,各款基于myFocus库制作的焦点图风格皮肤,可自行按需选择,myFocus焦点图库及皮肤可自由使用,保留作者相关信息即可,谢谢支持!^^ 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-myfocus-plug-tab-cha-nav-codes/ 具