在一个html中引入两个html,点击可切换
时间: 2024-02-23 14:03:15 浏览: 19
您可以通过以下步骤实现这个功能:
1. 在您的主 HTML 文件中,创建两个按钮,分别用于切换到两个不同的 HTML 文件:
```html
<button onclick="showHTML1()">HTML1</button>
<button onclick="showHTML2()">HTML2</button>
```
2. 创建两个 DIV 元素,用于容纳两个不同的 HTML 内容:
```html
<div id="html1"></div>
<div id="html2"></div>
```
3. 使用 JavaScript 编写两个函数,分别用于将两个不同的 HTML 文件加载到对应的 DIV 元素中:
```javascript
function showHTML1() {
document.getElementById("html1").innerHTML='<object type="text/html" data="html1.html" ></object>';
document.getElementById("html2").innerHTML='';
}
function showHTML2() {
document.getElementById("html2").innerHTML='<object type="text/html" data="html2.html"></object>';
document.getElementById("html1").innerHTML='';
}
```
4. 创建两个独立的 HTML 文件,分别用于加载到上面创建的 DIV 元素中。
注意:这种方法可能会受到浏览器安全性的限制,如果您的网站使用了 HTTPS 协议,那么加载 HTTP 协议的 HTML 文件可能会被浏览器阻止。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)