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

发布于 2024-08-19 06:28:55 字数 791 浏览 4 评论 0原文

我有一个带有 iframe 的页面，用于显示单击选项卡的内容。有 3 个选项卡和 1 个 iframe。与单击的每个选项卡相关的内容来源均以其他 html 和 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>

原文

I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.

What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?

Here's my code:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花细雨 2024-08-26 06:28:55

使用 IFRAME 加载动态内容（页面加载后）的唯一替代方法是使用 AJAX 更新网页上的容器。它非常优雅，通常比将整个页面结构加载到 IFRAME 中更快。

Ajax 与 JQuery （使用这个，你会被喜爱< /em> SO；AJAX 功能很棒而且简单）
Ajax with Prototype
使用 MooTools 进行 Ajax
使用 Matt Kruse 的 AJAX 工具箱实现独立 Ajax （以前用过这个，今天用 JQuery 因为我需要一个框架）
AJAX with Dojo （据说很快，但 AJAX 没那么简单）

回复收藏 0 原文

呢古 2024-08-26 06:28:55

另一种替代方法是使用 AJAX 加载选项卡的内容并使用 div 来显示内容。我建议使用现有的选项卡库可能是一种选择，而不是尝试解决与创建选项卡相关的所有问题。

如果您想尝试的话，也许 jQuery UI Tab 可能会有所帮助。

编辑：带有 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>

Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.

Maybe the jQuery UI Tab might be helpful here if you like to try it.

EDIT: AJAX example with UI Tabs.

First, the HTML will look like this.

   <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>

Then make sure that you import the appropriate jQuery files:

  <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...

Then add the code to create the tabs:

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

回复收藏 0 原文

入画浅相思 2024-08-26 06:28:55

还有 AJAX 的替代方案！

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

然后单击一个选项卡只会使相应内容的 DIV 的显示属性“阻止”，同时使其他两个 DIV 的显示属性“无”。

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

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

回复收藏 0 原文

盛夏已如深秋| 2024-08-26 06:28:55

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

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

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

然后您需要使用以下方法将以下 CSS 添加到 BODY 元素：

BODY { Background: transparent; }

It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.

If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

You would then need to add the following CSS to the BODY element using:

BODY { Background: transparent; }

回复收藏 0 原文

浴红衣 2024-08-26 06:28:55

你不需要脚本。

<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 不支持（任何现代浏览器都支持），则默认为所有可见内容。

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

You don't need script.

<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>

Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).

If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.

回复收藏 0 原文

各自安好 2024-08-26 06:28:55

HTML iframe 用于包含/显示非模板内容，例如 PDF 文件。在 SEO 和 UX 看来，将其用于模板内容（即 HTML）时都被认为是不好的做法。

就您而言，您只想有一个选项卡式面板。这可以通过多种方式解决：

将一堆链接作为选项卡，将一堆 div 作为选项卡内容。最初仅显示第一个选项卡内容，并使用 CSS display: none; 隐藏所有其他选项卡内容。通过在选项卡内容 div 上相应设置 CSS display: block;（显示）和 display: none;（隐藏），使用 JavaScript 在选项卡之间切换。
将一堆链接作为选项卡，将一个 div 作为选项卡内容。使用Ajax异步获取选项卡内容，并使用JavaScript将当前选项卡内容替换为新内容。
将一堆链接作为选项卡，将一个 div 作为选项卡内容。让每个链接发送不同的 GET 请求参数或表示单击的选项卡的路径信息。使用服务器端流程控制（PHP 的 if() 或 JSP 的等）或包含功能（PHP 的 include()< /code> 或 JSP 的等），根据参数/路径信息包含所需的选项卡内容。

当采用基于 JavaScript 的方法时，我强烈建议采用 jQuery 。

回复收藏 0 原文

青柠芒果 2024-08-26 06:28:55

这是 jQuery 示例，其中包含另一个 html 页面到您的文档中。这比 iframe 对 SEO 更友好。为了确保机器人不会对所包含的页面进行索引，只需将其添加到 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>

您还可以直接从 Google 包含 jQuery： google.com/apis/ajaxlibs/documentation/" rel="nofollow noreferrer">http://code.google.com/apis/ajaxlibs/documentation/ - 这意味着可以选择自动包含较新的版本和一些速度显着提高。另外，这意味着您必须相信他们只为您提供 jQuery ；）

This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in 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>

You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)

回复收藏 0 原文

绝影如岚 2024-08-26 06:28:55

如前所述，您可以使用 jQuery 或其他库来检索 HTML 文件的内容并将其填充到 div 中。然后你甚至可以做一个花式的淡入淡出，让它看起来很漂亮。

http://docs.jquery.com/Ajax/jQuery.get

这些内容行：

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});

编辑..
您可以预填充或 onclick 您可以动态获取

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})

如果您预填充可以有 3 个容器而不是现在的容器，2 个隐藏，1 个显示，并且单击功能将隐藏除您想要的之外的所有容器。

不过，获取的代码更少，时间更容易。

As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.

http://docs.jquery.com/Ajax/jQuery.get

Something along these lines:

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});

edit..
you could prepopulate or onclick you could do the get dynamically

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})

If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.

The get is less code though, easier time.

回复收藏 0 原文

~没有更多了~