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

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

如果由于某些原因iFrames对你不起作用，你可以在php中实现：

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