Javascript jQuery选项卡和当前网页之外的内容

这是一个有点傻的问题，但接下来。。。假设我希望使用jQuery选项卡，但不是我的选项卡指向同一页面中的div，而是我希望它们指向我站点中的页面，甚至外部页面。。。比如说

<div id="tabs">
    <ul>
        <li><a href="content/page1.html">Page 1</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#photos">Photos</a></li>
        <li><a href="content/page3.html">Page 3</a></li>
        <li><a href="content/page4.html">Page 4</a></li>

    </ul>
    <div id="profile">
        <p>Profile</p>
    </div>
    <div id="photos">
        <p>Photos</p>
    </div>
</div>

<div id="tabs">
        <ul>
            <li><a href="content/page1.html">Page 1</a></li>
            <li><a href="#profile">Profile</a></li>
            <li><a href="#photos">Photos</a></li>
            <li><a href="#page3">Page 3</a></li>
            <li><a href="#page4">Page 4</a></li>

        </ul>
        <div id="profile">
            <p>Profile</p>
        </div>
        <div id="photos">
            <p>Photos</p>
        </div>

         <div id="page3">
            <iframe></iframe>
        </div>

    </div>

or 

 <div id="tabs">
<ul>
    <li><a href="content/page1.html">Page 1</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#photos">Photos</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>

</ul>
<div id="profile">
    <p>Profile</p>
</div>
<div id="photos">
    <p>Photos</p>
</div>

     <iframe id="page3"></iframe>

侧面图

照片

对于指向第3页和第4页的选项卡，我是否必须使用IFrame或带有IFrame的Div来显示所需的内容？比如说

<div id="tabs">
    <ul>
        <li><a href="content/page1.html">Page 1</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#photos">Photos</a></li>
        <li><a href="content/page3.html">Page 3</a></li>
        <li><a href="content/page4.html">Page 4</a></li>

    </ul>
    <div id="profile">
        <p>Profile</p>
    </div>
    <div id="photos">
        <p>Photos</p>
    </div>
</div>

<div id="tabs">
        <ul>
            <li><a href="content/page1.html">Page 1</a></li>
            <li><a href="#profile">Profile</a></li>
            <li><a href="#photos">Photos</a></li>
            <li><a href="#page3">Page 3</a></li>
            <li><a href="#page4">Page 4</a></li>

        </ul>
        <div id="profile">
            <p>Profile</p>
        </div>
        <div id="photos">
            <p>Photos</p>
        </div>

         <div id="page3">
            <iframe></iframe>
        </div>

    </div>

or 

 <div id="tabs">
<ul>
    <li><a href="content/page1.html">Page 1</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#photos">Photos</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>

</ul>
<div id="profile">
    <p>Profile</p>
</div>
<div id="photos">
    <p>Photos</p>
</div>

     <iframe id="page3"></iframe>

侧面图

照片

或







侧面图

照片

如果这个问题没有意义或者我的措辞不好，请说，我会改进我的问题

更新**

---

抱歉，我应该补充一点，当使用原始代码（第一块）时，当用户使用IE8时，引用页面而不是div的选项卡不会显示。IE9似乎很好。。。在IE8中测试时，我的问题出现了！但是，当页面加载时，将显示第一个选项卡（指向第1页）。。。当我点击第3页或第4页链接时，没有显示任何内容

只需使用iFrame:

---

您是否尝试过此操作并遇到了某种问题？

如果您使用的是

jQueryUI选项卡

，您可以使用

选择

或

显示

事件来执行此操作。例如：

$( ".selector" ).tabs({
    show: function(event, ui) {
        // do your stuff with changing attribute `src` of your iframe
    }
});

---

是否要加载整个页面？或者只是在另一个页面中的内容？这个演示能满足您的需要吗？我想加载另一个页面中的内容，我将查看演示。。。谢谢，我应该补充一点，当使用原始代码时，当用户使用IE8时，不会显示选项卡。IE9似乎很好。。。在IE8中测试时，我的问题出现了！页面是否有效？如果你打开IE开发工具（我假设你使用的是9）并强制它显示在IE8标准中，它能工作吗？