使用iframe动态创建选项卡

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

一切工作正常，但当标签计数超过''，并且用户点击上一个标签时，下一个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>

来源

2012-11-05 user1800105

'DIV> LI'无效的html。 'LI'必须是列表元素的孩子 – charlietfl

可能是我误读，但它看起来像你想要的是用当前标签更新的内容。如果是这样，而不是$（'＃content.append（e）;您可以使用$（'＃content'）。html（e）; – Tom

一个主要问题是您的身份验证方式。你有一个变量c这是一个数字，从0开始，每当链接被点击时增加，然后被设置为你的iframe之一的ID。但是，您还将数字ID设置为已创建的选项卡。最终，这些元素ID将重叠，并且您将出现类似这样的错误。

最起码，让你的I帧有

“frame_” + $（链接）的ID .attr（ “相对”）
而非CT数值变量你现在使用

（ç复印件），这样的例子ID可能是“frame_2”的按钮，相对 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"); 
    } 
});

这样，你可以很容易地在相对属性链接到帧的ID，而不是从你的任意数值变量c。

你应该使用你的rel属性的一切，因为你已经给你的链接。你可以使用类似data-buttonid并使用.data（）来访问它，但这取决于你。

然后，当您确认所有内容时，请使用该号码将所有内容组合在一起。即

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

使用我提供的代码进行测试，结果是它以您想要的方式执行。

来源

2013-04-19 00:27:31

使用iframe动态创建选项卡

回答

相关问题