简单实现Tab切换（带框架）

<script type="text/javascript">
    $(function () {
        //加载时添加的标签卡
        if ('<%=Request["mid"] %>'=="1") {
            addTab('标题1', '/test.aspx', false);
        }
        else if('<%=Request["mid"] %>'=="2") {
            addTab('标题2', '/test1.aspx', false);
        }
    });
    //添加标签  title:标签名   url:iframe对应网址   isclose:是否带关闭按钮
    function addTab(title, url, isclose) {
    //生成页面显示标签的HTML代码
        var tabLength = $("#ttab li").children().length;

        var tabName = 'tabContent' + tabLength;
        var tabTitle = 'tabTitle' + tabLength;
        var tabTitleHtml = '';
        if (isclose)
            tabTitleHtml = '<li id="' + tabTitle + '"><a href="#' + tabName + '"><span>' + title + '<img src="/new_images/close.png" onclick="closeTab(' + tabLength + ')" /></span></a></li>';
        else
            tabTitleHtml = '<li><a href="#' + tabName + '"><span>' + title + '</span></a></li>';
        $("#ttab").append(tabTitleHtml);
        $("#tab-body").append('<div id="' + tabName + '" class="content"><iframe width="100%" height="100%" src="' + url + '" scrolling="auto"></iframe></div>');

        ReShow();
    }
    function menuBind() {
        $("#example ul li a").each(function (index) {
            $(this).unbind("click");
            $(this).bind("click", function () {
                var obj = $("#example ul li a").eq(index);
                var lk = obj.attr("datalink");
                if (typeof (obj.attr("datalink")) != "undefined") {
                    addTab(obj.text(), lk, true);
                }
            });
        });
    }
    function ckTabName(name) {
        $("#ttab li a").each(function (index) {
            $("#err").append(name + '   ' + $(this).text() + '<br>');
            if (name == $(this).text())
                return false;
        });
        return true;
    }
    //关闭标签(无需调用)
    function closeTab(page) {
        $("#tabTitle" + page).remove();
        $("#tabContent" + page).remove();
        ReShow();
    }
    //无需调用
    function ReShow() {
        $("#ttab li a").each(function (index) {
            $(this).unbind("click");
            $(this).bind("click", function () {
                $("#ttab li").removeClass("z-crt");
                $("#ttab li").eq(index).addClass("z-crt");
                var tabName = $("#ttab li a").eq(index).attr('href');
                tabName = tabName.substring(1, tabName.length);
                $('.content').hide();
                $('#tab-body div').eq(index).show();
            });
        });
        $("#ttab li a:last").click();
    }
</script>

<div class="g-tab" id="tab1">
    <div class="m-hd">
      <ul id="ttab">
      <li><a id="Desktop" href="#Desktop"><span>我的桌面</span></a></li>
      </ul>
    </div>
    <div id="tab-body">
    <div id="Desktop" class="content" ><iframe width="100%" height="100%" src="/MyDeskTop/MyPrompt.aspx" scrolling="auto"></iframe></div>
    </div>
  </div>