Fatal编程技术网
  • javascript/
  • Javascript 显示选项卡内容的iframe更好的替代方案？

Javascript 显示选项卡内容的iframe更好的替代方案？

javascript html css iframe tabs

Javascript 显示选项卡内容的iframe更好的替代方案？,javascript,html,css,iframe,tabs,Javascript,Html,Css,Iframe,Tabs,我有一个带有iframe的页面，以显示单击的选项卡的内容。共有3个选项卡和1个iframe。与单击的每个选项卡相关的内容源在其他html和css文件中进行格式化和编码 使用iframe的另一个替代方法是什么，因为我注意到当单击选项卡时，它仍然显示白色背景，类似于加载新页面时 这是我的密码： <div id="tabs"> <div id="overview"> <a target="tabsa" class="imagelink lookA" href="tof

我有一个带有iframe的页面，以显示单击的选项卡的内容。共有3个选项卡和1个iframe。与单击的每个选项卡相关的内容源在其他html和css文件中进行格式化和编码

使用iframe的另一个替代方法是什么，因为我注意到当单击选项卡时，它仍然显示白色背景，类似于加载新页面时

这是我的密码：

<div id="tabs">
<div id="overview">
  <a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
  <a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
  <a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>

<div id="tabs-1">
  <iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
  </iframe>
</div>
另一种选择是使用AJAX加载选项卡的内容，并使用div显示内容。我建议使用现有的选项卡库可能是一种选择，而不是试图解决与创建选项卡相关的所有问题

如果你想试试的话，也许这本书会对你有所帮助

编辑：带有UI选项卡的AJAX示例

首先，HTML将如下所示

   <div id="tabs">
     <ul>
      <li><a href="toframe.html"><span>Overviews</span></a></li>
      <li><a href="tawagpinoygallery.html"><span>Gallery</span></a></li>
      <li><a href="trframe.html"><span>Reviews</span></a></li>
     </ul>
   </div>



    

  • 

  • 

  •
然后确保导入了适当的jQuery文件：

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  etc...


等
然后添加代码以创建选项卡：

   <script type="text/javascript">
$(function() {
    $("#tabs").tabs();
});
</script>


$（函数（）{
$（“#制表符”）.tabs（）；
});
使用iFrame加载动态内容（页面加载后）的唯一替代方法是使用AJAX更新网页上的容器。它非常优雅，通常比将完整的页面结构加载到IFRAME中要快

  • （使用此功能，您将深受喜爱；AJAX功能非常强大且简单）
  • （以前使用这个，今天使用JQuery，因为我需要一个框架）
  • （据说速度很快，但AJAX没有那么简单）
如前所述，您可以使用jQuery或其他库检索HTML文件的内容并将其填充到div中。然后您甚至可以进行花式淡入，使其看起来非常漂亮

大致如下：

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});
编辑。。 您可以预先填充或单击，也可以动态执行get

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})
如果预填充，则可以有三个容器，而不是现在的容器，2个隐藏，1个显示，单击功能将隐藏除所需容器之外的所有容器

不过，get代码更少，时间也更轻松。

有一种替代AJAX的方法

您可以将所有三个可能的内容加载到单独的div中

然后单击一个选项卡将使相应内容的DIV的display属性为“block”，而使其他两个DIV的display属性为“none”

便宜、简单，不需要额外的http请求或编码的AJAX成本

请注意，如果选项卡的内容将根据其他数据动态更改，而不是在页面加载时已知，那么AJAX是一个更好的解决方案

最好将每个选项卡的内容加载到同一页面上的DIV中，然后在使用JavaScript和CSS display属性单击选项卡按钮时切换每个DIV的可见性

如果您不能做到这一点，那么iframe可能是最好的解决方案。您可以使iframe背景透明，请参见以下内容：

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>
你不需要脚本

<ul><li><a href="#foo">foo link</a><li><a href="#bar">bar link</a></ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>

    • 
食物内容
酒吧内容
加上这个CSS，在大多数浏览器中：
.tab:not（：target）{display:none！important；}
，如果不支持：target（任何现代浏览器都支持），它默认为所有可见的内容

如果使用脚本显示内容，请始终使用脚本隐藏内容。如果脚本没有运行，就让它优雅地降级。

HTML
iframe
用于包含/显示非模板内容，如PDF文件。在SEO和UX的观点中，当用于模板内容（即HTML）时，这被认为是不好的做法

在您的情况下，您只需要一个选项卡式面板。这可以通过几种方式解决：

  • 有一堆链接作为选项卡，有一堆div作为选项卡内容。最初仅显示第一个选项卡内容，并使用CSS
    display:none隐藏所有其他选项卡内容。通过设置CSS
    display:block，使用JavaScript在选项卡之间切换（显示）和
    显示：无（隐藏）
  • 有一堆链接作为选项卡，一个div作为选项卡内容。使用Ajax异步获取选项卡内容，并使用JavaScript将当前选项卡内容替换为新内容

  • 有一堆链接作为选项卡，一个div作为选项卡内容。让每个链接发送一个不同的GET请求参数或代表单击选项卡的pathinfo。使用服务器端流控制（PHP的
    if（）
    ，或JSP的
    ，等等）或包含功能（PHP的
    include（）
    ，或JSP的
    ，等等），根据参数/pathinfo包含所需的选项卡内容

    • 当采用基于JavaScript的方法时，我可以热情地推荐采用这种方法。

    这是一个在文档中包含另一个html页面的示例。这比
    iframe
    对搜索引擎优化更加友好。为了确保机器人程序没有索引包含的页面，只需在
    robots.txt

    <html>
  <header>
    <script src="/js/jquery.js" type="text/javascript">
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

    
$（“#从外部包括”）。加载（'http://example.com/included.html');
    您还可以直接从Google中包括jQuery:-这意味着可以选择自动包含较新版本，并显著提高速度。另外，这意味着您必须信任他们为您提供的只是jQuery；）

    IFRAME
    不是苹果的产品。请不要写iFrame。实际上它也是苹果的产品——它是一种视频格式。：）请重命名该问题，并添加您正在寻找的选项卡实现。如果我使用AJAX，我将如何操作？：）尝试了jQuery UI选项卡，但效果不太好..：（jQuery选项卡小部件已经有了通过AJAX加载内容的选项，而且非常简单 
    <html>
  <header>
    <script src="/js/jquery.js" type="text/javascript">
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>