JQuery動態添加多個tab頁標簽

　　jQuery是一個兼容多瀏覽器的js庫，核心理念是write less,do more(寫的更少,做的更多)，jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。

　　自己用到的一個主頁多標簽的小例子，用戶登錄后顯示自己的相應菜單和我的主頁。

代碼如下：

　　　　<div id="right" class="content_right">
            <div id="line">
                <ul id="tabs">
                    <!-- Tabs go here -->
                    <li class='current'>
                        <a class='tab' id="index" href='#'>我的主頁</a>
                    </li>
                </ul>
            </div>
            <div id="tabcontent">
                <!-- Tab content goes here -->
                <div id="index_tabcontent" style="background-color:#FFFFFF;">
                    <iframe style='width:100%;height:630px;display:block;border:0' src="default.jsp"></iframe>
                </div>
            </div>
        </div>

 

　　當用戶點擊左側菜單是新增新的tab頁標簽

　　

 

　　相應的JQuery代碼如下：

　　

　　$(document).ready(function() {
            $("li a").click(function() {
                if($(this).attr("id")=="index")return;
                if ($("#" + $(this).attr("rel")).length != 0){
                    var contentname = $(this).attr("rel");
                    // hide all other tabs
                    $("#tabcontent div").hide();
                    $("#tabs li").removeClass("current");
                    // show current tab
                    $("#" + contentname +"_tabcontent").show();
                    $("#" + contentname).parent().addClass("current");
                }else
                    addTab($(this));
            });

            $('#tabs a.tab').live('click', function() {
                // Get the tab name
                var contentname = $(this).attr("id") + "_tabcontent";

                // hide all other tabs
                $("#tabcontent div").hide();
                $("#tabs li").removeClass("current");

                // show current tab
                $("#" + contentname).show();
                $(this).parent().addClass("current");
            });

            $('#tabs a.remove').live('click', function() {
                // Get the tab name
                var tabid = $(this).parent().find(".tab").attr("id");

                // remove tab and related content
                var contentname = tabid + "_tabcontent";
                $("#" + contentname).remove();
                $(this).parent().remove();

                // if there is no current tab and if there are still tabs left, show the first one
                if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                    // find the first tab    
                    var firsttab = $("#tabs li:first-child");
                    firsttab.addClass("current");

                    // get its link name and show related tabcontent
                    var firsttabid = $(firsttab).find("a.tab").attr("id");
                    $("#" + firsttabid + "_tabcontent").show();
                }
            });
        });
        function addTab(link) {
            // If tab already exist in the list, return
            if ($("#" + $(link).attr("rel")).length != 0)
                return;
            
            // hide other tabs
            
            $.ajaxSetup({cache:false});
            $.ajax({
                type:'post',
                dataType:'html',
                url:"BaseAction_getDirectUrl.jhtml?url="+$(link).attr("name")+"&nocache=" + new Date().getTime(),
                success:function(data){
                    $("#tabs li").removeClass("current");
                    $("#tabcontent div").hide();
                    
                    // add new tab and related tabcontent
                    $("#tabs").append("<li class='current'><a class='tab' id='" +
                    $(link).attr("rel") + "' href='#'>" + $(link).html() + 
                    "</a><a href='#' class='remove'>x</a></li>");
                    var $div = $("<div id='" + $(link).attr("rel") + "_tabcontent'></div>");
                    var $iframe = $("<iframe style='width:100%;height:630px;display:block;border:0'></iframe>");
                    $iframe.attr("src",data);
                    $div.append($iframe);
                    $("#tabcontent").append($div);
                },
                error:function()
                   {
                    //錯誤處理
                    $.ligerDialog.open({ target: $("#errorMsg"),title:'錯誤代碼',allowClose:false,width:450,height:180,buttons: [
                    { text: '返回首頁', onclick: function (item, dialog) { parent.location.href=$('#url').val(); } }]});
                   }
             });
                
            // set the newly added tab as current
            $("#" + $(link).attr("rel") + "_tabcontent").show();
        }

 　　　　代碼相對簡單，就不做過多說明了。