从jquery标签打开不同的html文件

我一直在尝试使用jquery标签来启动html页面（在同一页面内），但不知何故反复失败。看起来像一个简单的事情，但在我的所有尝试中，标签停止工作或页面无法打开。从jquery标签打开不同的html文件

这是我想要实现的 - 我的index.html页面带有多个选项卡（比如a，b，c）。我有单独的页面a.html，b.html和c.html编写，并希望它们在同一页面（在选项卡下方）打开，使得选项卡无所不在。什么是最简单的方法来实现这个工作？我试图简单地调用html页面甚至使用iframe，但似乎没有任何工作。另外，当我尝试使用iframe时，框架并未使用可用的页面的全部高度，但只能说明它的20％（在最新的Firefox中）。

我知道这可能是一个微不足道的问题，可能是由于我的一个愚蠢的错误造成的，但我已经花了超过一个星期的时间试图让这个工作，现在，我的智慧结束！
任何帮助将不胜感激！
感谢

{编辑的职位，以增加相应的代码段}

<body> 
    ... 
    <div id="navigation" class="menu"> 
     <ul class="tabNavigation"> 
      <li><a href="#A">A</a></li> 
      <li><a href="#B">B</a></li> 
      <li><a href="#C">C</a></li> 
     </ul> 
    </div> 
    <div> 
     <!--tab contents --> 
     <div class="panes"> 
      <div id="A">A Content<p> tab A content</p> 
      <iframe src="a.html"></iframe></div> 
      <div id="B">B Content <p> tab B content</p> 
      <iframe src="b.html"></iframe></div> 
      <div id="C">C Content<p> tab C content</p> 
      <iframe src="c.html"></iframe></div> 
     </div> 
    </div> 

    <!-- JS to activate the tabs --> 
    <script> 
     $(function() 
     { 
      var tabContainers = $('div.tabs > div'); 
      $('div.tabNavigation ul.tabs a').click(function() 
      { 
       tabContainers.hide(); 
       tabContainers.filter(this.hash).show(); 

       $('div.tabs ul.tabNavigation a').removeClass('selected'); 
       $(this).addClass('selected'); 

       return false; 
      }).filter(':first').click(); 
     }); 
    </script> 
</body>

来源

2011-07-11 Sanjay

请包括相关的代码片段（例如您的相关HTML和Javascript）。 – ghayes

你是否错过了div.panes中的一些关闭div？ – Marty

对不起，我不得不重新格式化代码，使其尽可能简单（也为每行添加4个空格使Markdown不能解释html位是一件痛苦的事情）。最终犯了一些愚蠢的错误。所有标签都在我的官方“非工作”版本中正确关闭！编辑：修复了缺少的关闭div。 – Sanjay

{与特定的代码编辑} 你可以简单地把标签在每一页上。页面将重新加载，但标签将位于相同的位置。

如果重新加载困扰你，你将不得不使用javascript调用html页面的内容。

该脚本将调用页面中的html并将html放入具有相应字母的div的窗格中。这应该为您尝试使用iframe实现，但当然不包含iframe。

<script type="text/javascript"> 
$(document).ready(function() { 
    $.get("a.html", function(data){ 
     $(#A).append(data); 
    }); 

    $.get("b.html", function(data){ 
     $(#B).append(data); 
    }); 

    $.get("c.html", function(data){ 
     $(#C).append(data); 
    }); 
}); 
</script>

来源

2011-07-11 04:24:12

我想过这样做，但有两个问题 - 首先，正如你所说的那样，页面将被重新加载，其次（根据我的理解）当前打开的页面的标签仍然是可点击的，这不是那种我正在寻找的行为。此外，每个打开的选项卡将在我希望避免的URL中使用不同的.html。 – Sanjay

从jquery标签打开不同的html文件

回答

相关问题