jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

  自己用到的一个主页多标签的小例子,用户登录后显示自己的相应菜单和我的主页。

代码如下:

 1     <div id="right" class="content_right">
2 <div id="line">
3 <ul id="tabs">
4 <!-- Tabs go here -->
5 <li class='current'>
6 <a class='tab' id="index" href='#'>我的主页</a>
7 </li>
8 </ul>
9 </div>
10 <div id="tabcontent">
11 <!-- Tab content goes here -->
12 <div id="index_tabcontent" style="">
13 <iframe style='width:100%;height:630px;display:block;border:0' src="default.jsp"></iframe>
14 </div>
15 </div>
16 </div>

  当用户点击左侧菜单是新增新的tab页标签

  

  相应的JQuery代码如下:

  

 1   $(document).ready(function() {
2 $("li a").click(function() {
3 if($(this).attr("id")=="index")return;
4 if ($("#" + $(this).attr("rel")).length != 0){
5 var contentname = $(this).attr("rel");
6 // hide all other tabs
7 $("#tabcontent div").hide();
8 $("#tabs li").removeClass("current");
9 // show current tab
10 $("#" + contentname +"_tabcontent").show();
11 $("#" + contentname).parent().addClass("current");
12 }else
13 addTab($(this));
14 });
15
16 $('#tabs a.tab').live('click', function() {
17 // Get the tab name
18 var contentname = $(this).attr("id") + "_tabcontent";
19
20 // hide all other tabs
21 $("#tabcontent div").hide();
22 $("#tabs li").removeClass("current");
23
24 // show current tab
25 $("#" + contentname).show();
26 $(this).parent().addClass("current");
27 });
28
29 $('#tabs a.remove').live('click', function() {
30 // Get the tab name
31 var tabid = $(this).parent().find(".tab").attr("id");
32
33 // remove tab and related content
34 var contentname = tabid + "_tabcontent";
35 $("#" + contentname).remove();
36 $(this).parent().remove();
37
38 // if there is no current tab and if there are still tabs left, show the first one
39 if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
40
41 // find the first tab
42 var firsttab = $("#tabs li:first-child");
43 firsttab.addClass("current");
44
45 // get its link name and show related tabcontent
46 var firsttabid = $(firsttab).find("a.tab").attr("id");
47 $("#" + firsttabid + "_tabcontent").show();
48 }
49 });
50 });
51 function addTab(link) {
52 // If tab already exist in the list, return
53 if ($("#" + $(link).attr("rel")).length != 0)
54 return;
55
56 // hide other tabs
57
58 $.ajaxSetup({cache:false});
59 $.ajax({
60 type:'post',
61 dataType:'html',
62 url:"BaseAction_getDirectUrl.jhtml?url="+$(link).attr("name")+"&nocache=" + new Date().getTime(),
63 success:function(data){
64 $("#tabs li").removeClass("current");
65 $("#tabcontent div").hide();
66
67 // add new tab and related tabcontent
68 $("#tabs").append("<li class='current'><a class='tab' id='" +
69 $(link).attr("rel") + "' href='#'>" + $(link).html() +
70 "</a><a href='#' class='remove'>x</a></li>");
71 var $div = $("<div id='" + $(link).attr("rel") + "_tabcontent'></div>");
72 var $iframe = $("<iframe style='width:100%;height:630px;display:block;border:0'></iframe>");
73 $iframe.attr("src",data);
74 $div.append($iframe);
75 $("#tabcontent").append($div);
76 },
77 error:function()
78 {
79 //错误处理
80 $.ligerDialog.open({ target: $("#errorMsg"),title:'错误代码',allowClose:false,width:450,height:180,buttons: [
81 { text: '返回首页', onclick: function (item, dialog) { parent.location.href=$('#url').val(); } }]});
82 }
83 });
84
85 // set the newly added tab as current
86 $("#" + $(link).attr("rel") + "_tabcontent").show();
87 }

    代码相对简单,就不做过多说明了。

JQuery动态添加多个tab页标签的更多相关文章

  1. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  2. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

  3. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  4. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  5. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  6. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  7. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  8. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  9. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

随机推荐

  1. floor ceil

    echo floor(11/10); echo ceil(11/10); swiper  可以用在ajax的success中,如果用ejs拼接的,放ajax里面才可以轮播

  2. dbms_output.put与put_line

    BEGIN DBMS_OUTPUT.ENABLE (buffer_size => NULL);--with no limit on the output. dbms_output.put('a' ...

  3. uboot的硬件驱动

    1.uboot借用(移植)了linux驱动(1)linux驱动本身做了模块化设计.linux驱动本身和linux内核不是强耦合的,这是linux驱动可以被uboot借用(移植)的关键.(2)uboot ...

  4. [技巧篇]00.TrimFilter去掉jsp页面空白,提升访问速度

    最近感觉项目访问的速度有点慢,我就在网络中一顿搜索,发下了一个好东东,忍不住跟大家分享,希望大家可以试一试,确实有提升的空间啊!要求去除空白区.提取公用代码.减小页面. 胖先生乱搜之下,找到了Trim ...

  5. Mybatis(3) 映射文件-增删改查

    映射文件: 映射文件是根据数据库模型生成的编写sql脚本xml文件, mapper标签中namespace属性值为对应模型实体类的全类名. <?xml version="1.0&quo ...

  6. 任务调度 Quartz 学习(一) SimpleTrigger

    概述: 在实际开发过程中,会遇到很多任务调度的需求. 比如说:某网站要在每周一上午9点更新网站数据,并发邮件通知用户: 再比如某论坛需求:每隔半个小时生成精华文章的RSS文件,每天凌晨统计论坛用户的积 ...

  7. 洛谷 P1722 矩阵 II

    题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(usqwedf:这不是一个2 ...

  8. 51Nod 1083 矩阵取数问题 | 动态规划

    #include "bits/stdc++.h" using namespace std; #define LL long long #define INF 0x3f3f3f3f3 ...

  9. 【BZOJ2882】工艺 [SAM]

    工艺 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 小敏和小燕是一对好朋友. 他们正在玩一 ...

  10. HihoCoder 重复旋律

    あの旋律を何度も繰り返しでも.あの日見た光景を再現できない 无论将那段旋律重复多少次,也无法重现那一日我们看到的景象 もし切ないならば.時をまきもどしてみるかい? 若是感到惆怅的话,要试着让时光倒流吗 ...