Question

我使用html和css代码创建了一个标签。每个选项卡中显示的内容放在不同的html页面中。我想在不使用任何API（jquery / PHP ..）的情况下加载选项卡内容。我想在用户导航到选项卡时加载html页面，我想只使用html / javascript来实现这一点。

Code demo

我尝试使用以下代码，但它无效。

<html>
<head>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <script>
        w3IncludeHTML();
    </script>
</head>
<body>
..
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab1</label>
        <div class="content">
            <div w3-include-html="tab1Content.html"></div>
        </div>
    </div>
</body>

Answer 1

我曾经在div中添加iframe：

<div class="content">
    <iframe src="file.html">      
    </iframe>
</div>

Answer 2

有几种方法可以做到这一点。
1.） iFrames
而不是：

<div w3-include-html="tab1Content.html"></div>

这样做：

<iframe src="tab1Content.html"></iframe>

2）的 PHP
如果由于某些原因iFrame不能为你工作，你可以在php中执行此操作：

<div class="content"><?php echo file_get_contents("tab1Content.html");?></div>

用于加载html页面的html / javascript代码

2 个答案: