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 }
代碼相對簡單，就不做過多說明了。