JQuery动态添加多个tab页标签

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='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='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,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         }

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