如何实现首页框架的tab签，点击模块在首页添加tab签之后，同时显示其对应的页面？

如何实现首页框架的tab签，点击模块在首页添加tab签之后，同时显示其对应的页面？

先上效果图

一.html部分

<div class="sp-nav-tab" id="tab1">
        <ul class="sp-tab-menu">
            <li class="sp-tab-current" data-href="#nav_tab_1">我的表单</li>
            <li data-href="#nav_tab_2">表单总结<i class="fa fa-times-circle"></i></li>
            <li data-href="#nav_tab_3">办公室</li>
            <li data-href="#nav_tab_4">青年报</li>
        </ul>
        <div class="sp-tab-box">
            <div class="sp-tab-box-col sp-tab-box-current" id="nav_tab_1">
                <iframe src="tpl/表单.html" width="100%" height="500px" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto">
                </iframe>
            </div>
            <div class="sp-tab-box-col" id="nav_tab_2">  
                <iframe src="iframe2.html" width="100%" height="500px" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto">
                </iframe>  
            </div>
            <div class="sp-tab-box-col" id="nav_tab_3">
                <iframe src="iframe3.html" width="100%" height="500px" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto">
                </iframe>                
            </div>
            <div class="sp-tab-box-col" id="nav_tab_4">
                <iframe src="iframe4.html" width="100%" height="500px" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto">
                </iframe>                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            sp.tabs('#tab1');            
        });
    </script>

二.css部分

/*首页tab选项卡*/
.sp-nav-tab{float:left; width:100%;}
.sp-nav-tab .sp-tab-menu{float:left;overflow:hidden;height:40px;width:100%;background-color:#fff;}/*tab的菜单*/
.sp-nav-tab .sp-tab-menu li{float:left;width:100px;height:40px;line-height:40px !important;color:#333;text-align:center;cursor:pointer;} 
.sp-nav-tab .sp-tab-menu li.sp-tab-current{position:relative;color:#4a910c;font-weight:bold; background-color:#fff;border-bottom:2px solid #4a910c;height:40px;line-height:40px;}
.sp-nav-tab .sp-tab-menu li i{float:right; margin-bottom:5px; margin-right:2px;}
.sp-nav-tab .sp-tab-box{float:left; width:100%; padding:0; border-top:1px solid #2f4050;margin-top:-1px;}/*tab的肚子*/
.sp-nav-tab .sp-tab-box .hide{display:none;}         
.sp-nav-tab .sp-tab-box-col{display:none;}
.sp-nav-tab .sp-tab-box  .sp-tab-box-current{display:block;}

三.js部分

//首页tab签导航条
sp.tabs = function (name) {
    $(name + " ul li").each(function () {
        $(this).click(function () {
            var get_child_id = $(this).attr("data-href");
            $(this).addClass("sp-tab-current").siblings().removeClass("sp-tab-current");
            $(name + " .sp-tab-box-col").hide();
            $(get_child_id).addClass("sp-tab-box-current").show();
            //alert(get_child_id);
        });
        //点击上面的叉号时
        $("i", this).click(function () {
            var get_child_id = $(this).parent().attr("data-href"); //获取对应id 
            if ($(this).parent().hasClass("sp-tab-current")) {
                //若此列是当前显示的列，让其前一列显示
                $(this).parent().prev("li").addClass("sp-tab-current").show();
                $(get_child_id).prev(".sp-tab-box-col").addClass("sp-tab-box-current").show();
                $(this).parent().remove();
                $(get_child_id).remove();
            } else {
                //若不是当前列，则直接移除
                $(this).parent().remove();
                $(get_child_id).remove();
            }     
            
        });
    });
};
sp.addTabNav = function (id, title, src) {
    var setID = "nav_tab_" + id;
    if ($("#navHeadTabs .sp-tab-box").children("#" + setID).length < 1) {
        $("#navHeadTabs ul li").removeClass("sp-tab-current");
        $(".sp-tab-box-current").hide();
        $("#navHeadTabs .sp-tab-box .sp-tab-box-col").removeClass("sp-tab-box-current");
        $("#navHeadTabs ul").append("<li class=\"sp-tab-current\" id=\"nav_tab_menu_li_" + id + "\" data-href=\"#" + setID + "\">" + title + "<i class=\"fa fa-times-circle\"></i></li>");
        $("#navHeadTabs .sp-tab-box").append("<div class=\"sp-tab-box-col sp-tab-box-current\" id=\"" + setID + "\"><iframe src=\"" + src + "\" width=\"100%\" height=\"100%\" frameborder=\"0\"  scrolling=\"auto\"></iframe></div>");
        $("#" + setID).show();
        sp.tabs('#navHeadTabs');
    } else {
        $("#navHeadTabs ul li").removeClass("sp-tab-current");
        $(".sp-tab-box-current").hide();
        $("#navHeadTabs .sp-tab-box .sp-tab-box-col").removeClass("sp-tab-box-current");        
        $("#nav_tab_menu_li_" + id).addClass("sp-tab-current").show();
        $("#" + setID).addClass("sp-tab-box-current").show();
        sp.tabs('#navHeadTabs');
    }    
};