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 }
代码相对简单，就不做过多说明了。