使用JQUERY Tabs插件宿主IFRAMES

2023年6月10日下午6:04 • JavaScript

使用JQUERY Tabs插件宿主IFRAMES是一种常见的网页开发技巧，可以实现在同一页面中切换不同的网页内容而不用刷新整个页面，提高用户的操作体验。下面是使用JQUERY Tabs插件宿主IFRAMES的完整攻略及示例说明。

下载和引入JQUERY库和JQUERY Tabs插件

首先，需要从官方网站下载最新版本的JQUERY库和JQUERY Tabs插件，并引入到网页中。这个过程可以通过在head标签中添加如下代码实现：

<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

创建HTML标签和样式

接下来，需要创建HTML标签和样式，以便在页面中呈现出JQUERY Tabs插件的标签页和IFRAME宿主。示例代码如下：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <iframe src="https://www.baidu.com"></iframe>
    </div>
    <div id="tabs-2">
        <iframe src="https://www.google.com"></iframe>
    </div>
    <div id="tabs-3">
        <iframe src="https://www.yahoo.com"></iframe>
    </div>
</div>

#tabs {
    width: 600px;
    height: 400px;
}
#tabs iframe {
    width: 100%;
    height: 100%;
    border: none;
}

初始化Tabs插件

最后，需要在文档加载完成后，初始化JQUERY Tabs插件，以及设置IFRAME宿主的自适应高度，以便在切换标签页后，IFRAME始终与标签页高度一致。

$(document).ready(function() {
    $("#tabs").tabs();
    $(window).resize(function() {
        $("iframe").height($("#tabs").height() - $("ul").outerHeight());
    }).resize();
});

以上就是使用JQUERY Tabs插件宿主IFRAMES的完整攻略。

下面是两个示例说明，分别演示如何在标签页中宿主Youtube视频和内嵌网页。

使用JQUERY Tabs插件宿主Youtube视频

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Youtube</a></li>
    </ul>
    <div id="tabs-1">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
    </div>
</div>

使用JQUERY Tabs插件宿主内嵌网页

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">内嵌网页</a></li>
    </ul>
    <div id="tabs-1">
        <iframe src="https://www.qq.com"></iframe>
    </div>
</div>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用JQUERY Tabs插件宿主IFRAMES - Python技术站

使用JQUERY Tabs插件宿主IFRAMES

相关文章