加载其他页面的标签面板部分

我使用jquery ui选项卡。我想在某个标签的面板中显示其他页面的一部分（page.html，它位于同一个文件夹中）。这里是page.html加载其他页面的标签面板部分

<html> 
<head> 
<head> 
<body> 
    <div id="content1"> 
     <p>Page.html content 1</p> 
    </div> 
    <div id="content2"> 
     <p>Page.html content 2</p> 
    </div> 
</body> 
</html>

这里是用标签

<html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css" /> 
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script> 
    <script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script> 
    <script> 
     $(function() { 
      $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
      $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
      $("#tabs").tabs({ 
       event: "mouseover" 
      }); 
     }); 
    </script> 
    <style> 
     .ui-tabs-vertical { width: 55em; } 
     .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
     .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
     .ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
     .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
     .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
    </style> 
</head> 
<body> 
    <div id="tabs"> 
     <ul> 
      <li> 
       <a href="/page.html#content1">Elem 1</a> 
      </li> 
      <li> 
       <a href="#">Elem 2</a> 
      </li> 
      <li> 
       <a href="#">Elem 3</a> 
      </li> 
     </ul> 
    </div> 
</body> 
</html>

但elem1面板始终是清晰的页面。哪里有问题？

来源

2013-07-22 lapots

如果它与您正在运行的脚本位于相同的文件夹中，则该路径在开始处不应该有一个/。 /page.html将在您的服务器根目录中查找page.html。

来源

2013-07-22 16:15:58

加载其他页面的标签面板部分

回答

相关问题