3

当用户单击菜单时，我正在动态创建选项卡。引用的 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>
4

1 回答 1

0

一个主要问题是您标识元素的方式。您有一个数字变量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() 来访问它，但这取决于您。

然后，当您识别所有内容时，使用该号码将所有内容配对。IE

  • 帧 ID："frame_" + $(link).attr("rel")
  • 标签 ID/名称："tab_" + $(link).attr("rel")
  • 名称：“tab_anchor_”+ $(link).attr(“rel”)

使用我提供的代码进行测试会导致它按照你想要的方式执行。

于 2013-04-19T00:27:31.873 回答