在一个html中引入两个html,点击可切换,使用jquery
时间: 2023-11-17 21:06:38 浏览: 34
您可以使用 jQuery 的 load() 方法来实现在一个 HTML 中引入两个 HTML 并切换显示的功能,具体步骤如下:
1. 在您的主 HTML 文件中,创建两个按钮,分别用于切换到两个不同的 HTML 文件:
```html
<button id="html1-btn">HTML1</button>
<button id="html2-btn">HTML2</button>
```
2. 创建一个 DIV 元素,用于容纳两个不同的 HTML 内容,并设置一个默认显示的 HTML 文件:
```html
<div id="html-container"></div>
<script>
$(document).ready(function() {
$("#html-container").load("html1.html");
});
</script>
```
3. 使用 jQuery 编写两个函数,分别用于将两个不同的 HTML 文件加载到 DIV 元素中,并在按钮单击时调用这些函数,切换显示的 HTML 文件:
```javascript
$(document).ready(function() {
$("#html1-btn").click(function() {
$("#html-container").load("html1.html");
});
$("#html2-btn").click(function() {
$("#html-container").load("html2.html");
});
});
```
4. 创建两个独立的 HTML 文件,分别用于加载到上面创建的 DIV 元素中。
注意:同样需要注意浏览器安全性的限制,如果您的网站使用了 HTTPS 协议,那么加载 HTTP 协议的 HTML 文件可能会被浏览器阻止。