Question

我在用户点击菜单时动态创建标签。引用的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>

Answer 1

一个主要问题是您对元素的识别方式。您有一个变量 c ，它是数字，从0开始，每当点击一个链接时都会增加，然后被设置为ID作为您的一个iframe。但是，您还要为创建的选项卡设置数字ID。最终，这些元素ID将重叠，您将遇到类似这样的错误。

至少，让你的iframe的ID为

“frame_”+ $（link）.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";
    }  
}

使用：

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

通过这种方式，您可以轻松地将 rel 属性链接到框架的ID，而不是 c 变量中的任意数值。

您应该使用 rel 属性，因为您已经提供了链接。您可以使用 data-buttonid 之类的东西并使用.data（）来访问它，但这取决于您。

然后当您对所有内容进行ID时，请使用该数字将所有内容配对。即。

帧ID：“frame_”+ $（link）.attr（“rel”）
标签ID /名称：“tab_”+ $（链接）.attr（“rel”）
姓名：“tab_anchor_”+ $（link）.attr（“rel”）

使用我提供的代码进行测试导致它按照您的需要执行。

使用iframe动态创建标签页

1 个答案: