Javascript 使用iframe动态创建选项卡_Javascript_Jquery_Html_Tabs

Javascript 使用iframe动态创建选项卡

javascript jquery html tabs

Javascript 使用iframe动态创建选项卡,javascript,jquery,html,tabs,Javascript,Jquery,Html,Tabs,我在用户单击菜单时动态创建选项卡。引用的html文件在iframe中打开，iframe也是动态创建的一切正常，但当选项卡计数超过“3”且用户单击上一个选项卡时，下一个iframe将显示在上一个iframe内容的下方下面是我使用的代码。有人能建议我该怎么做吗 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <script text/javascri

我在用户单击菜单时动态创建选项卡。引用的html文件在iframe中打开，iframe也是动态创建的

一切正常，但当选项卡计数超过“3”且用户单击上一个选项卡时，下一个iframe将显示在上一个iframe内容的下方

下面是我使用的代码。有人能建议我该怎么做吗

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script text/javascript>
$(document).ready(function() {
       var c=0;
       $("#documents a").click(function() {
       c++;
       addTab($(this),c);
       return false;        
       });

    $('#tab1 a.tab').live('click', function() {
        // Get the tab name
            i = 0;
            var chk;
            var contentname = $(this).attr("id") + "_content";

        var ifid=$("#content .dcontent:last iframe").attr("id");

            // hide all other tabs
            if(ifid>1)
            {
            for(i=ifid;i>0;i--) 
                {
                    fr = document.getElementById (i);
                    if (fr.style.display!='none')
                    {
                        fr.style.display="none";
                    }   
                }  
            }    

        //make the current frame visible 
        var lnm=$(this).attr("name");

        fr = document.getElementById (lnm);

        if (fr.style.display=='none')
            fr.style.display="block";

        $("#tab1 li").removeClass("current");

        // show current tab
        $(this).parent().addClass("current");

    });
});

/* Creation of Tab*/ 
function addTab(link,ct) {

    // If tab already exist in the list, return
   if ($("#" + $(link).attr("rel")).length != 0) 

return;

    // hide other tabs
$("#tab1 li").removeClass("current");

   if(ct>1)
   {
            for(i=ct-1;i>0;i--){    
                fr = document.getElementById (i);

                if (fr.style.display!='none')
                    fr.style.display="none";
            }  
   }

    // add new tab and related content
   $("#tab1").append("<li class='current'><a class='tab' id='" + $(link).attr("rel") + "' name='"+ct+"' href='" + $(link).attr("href") + "' target='" + $(link).attr("target") + "'>" + $(link).html() + "</a><a name ='"+ct+"' href='#' class='remove' >x</a></li>");

    var e = $('<div class="dcontent" ><li style="list-style:none;"><iframe id="'+ct+'" src='+$(link).attr("href")+' name="content" align="middle" width=600px; height=400px;> </iframe></li></div>');

    $('#content').append(e);   
}
</head>
    <body>

        <ul id="tabs">
            <!-- Tabs go here -->
            <div style="float: left;">
                <ul id="menu">                                
            <li> <a href="#">Next</a>
               <ul id="documents">
                        <li><a href="tab1.html" target="content" rel="1" >Document4</a></li>
                            <li><a href="tab2.html" rel="2"  target="content" >Document5</a></li>
                            <li><a href="tab3.html" rel="3"  target="content" >Document6</a></li>
                           <li><a href="tab4.html" rel="4"  target="content" >Document6</a></li>
                        </ul>
                    </li>

                </ul>

            </div>
        </ul>
        <ul id="tab1">
            <div style="float: left;">     
        </ul>

        <div id="content">              
        </div>


$（文档）.ready（函数（）{
var c=0；
$（“#文档a”）。单击（函数（）{
C++；
addTab（$（本），c）；
返回false；
});
$（'#tab1 a.tab'）.live（'click'，function（）{
//获取选项卡名称
i=0；
var-chk；
var contentname=$（this.attr（“id”）+“\u content”；
var ifid=$（“#content.dcontent:last iframe”）.attr（“id”）；
//隐藏所有其他选项卡
如果（ifid>1）
{
对于（i=ifid；i>0；i--）
{
fr=document.getElementById（i）；
如果（fr.style.display！=“无”）
{
fr.style.display=“无”；
}   
}  
}    
//使当前帧可见
var lnm=$（this.attr（“name”）；
fr=document.getElementById（lnm）；
如果（fr.style.display=='none'）
fr.style.display=“块”；
$（“tab1 li”）.removeClass（“当前”）；
//显示当前选项卡
$（this.parent（）.addClass（“当前”）；
});
});
/*创建选项卡*/
功能添加选项卡（链接，ct）{
//如果列表中已存在选项卡，则返回
if（$（“#”+$（link.attr（“rel”））.length！=0）
返回；
//隐藏其他选项卡
$（“tab1 li”）.removeClass（“当前”）；
如果（ct>1）
{
对于（i=ct-1；i>0；i--）{
fr=document.getElementById（i）；
如果（fr.style.display！=“无”）
fr.style.display=“无”；
}  
}
//添加新选项卡和相关内容
$（“#tab1”）。追加（）；
var e=$（'”）；
$（'内容'）。附加（e）；
}

一个主要问题是如何标识元素。您有一个变量c，它是数值型的，从0开始，每次单击链接时都会增加，然后被设置为一个iframe的ID。但是，您也在为创建的选项卡设置数字标识。最终，这些元素ID将重叠，并且会出现如下错误

至少，让您的iFrame具有

“帧”+$（链接）.attr（“rel”）
而不是您现在使用的ct数值变量（复制c）

因此，对于rel属性为2的按钮，示例ID可以是“frame_2”。这样，您就不会将rel属性为2的按钮连接到具有随机数字ID的某个帧

完全去掉c变量

而不是这个循环：

if(ct>1) {
    for(i=ct-1;i>0;i--){    
        alert(i);
        fr = document.getElementById (i);

        if (fr.style.display!='none')
            fr.style.display="none";
    }  
}

使用：

这样，您就可以轻松地将rel属性链接到帧的ID，而不是c变量中的任意数值

你应该使用你的rel属性，因为你已经给了你的链接。您可以使用data buttonid和.data（）来访问它，但这取决于您自己

然后，当你识别所有东西时，用这个数字把所有东西配对在一起。i、 e

帧ID:“帧”+$（链接）.attr（“rel”）
选项卡ID/名称：“选项卡”+$（链接）.attr（“rel”）
名称：“tab_锚定”+$（link.attr（“rel”）

使用我提供的代码进行测试后，它会按照您的要求执行。

DIV>LI

是无效的html

LI

必须是列表元素的子元素可能我误读了，但看起来您只需要使用当前选项卡更新内容。如果是这样而不是$（'#content.append（e）；您可以使用$（'#content'）.html（e）；

$("#content").children("div.dcontent").each(function() {
    var theFrame = $(this).find("li iframe");
    if ($(theFrame).attr("id") != ("frame_" + $(link).attr("rel"))) {
        $(theFrame).css("display", "none");
    }
});