Question

这里有点愚蠢的问题但是这里...说我希望使用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>

对于指向第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="#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中测试时我的问题上升了！但是当页面加载时会显示第一个选项卡（指向Page1）...当我点击链接时，没有显示任何内容......

Answer 1

如果您使用jQueryUI Tabs，则可以使用select或show事件。例如：

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

Answer 2

只需使用iFrame：<iframe id="page3"></iframe>

你试过这个并遇到某种问题吗？

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

2 个答案: