js中如何实现点击指定的tab标签,然后在指定的div中显示指定的html文件
时间: 2024-05-15 20:13:01 浏览: 7
可以通过以下步骤实现:
1. HTML结构中创建tab标签和显示内容的div。
```html
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
</div>
<div id="tab1" class="tabcontent"></div>
<div id="tab2" class="tabcontent"></div>
```
2. CSS样式中设置tab标签和显示内容的样式。
```css
.tab {
overflow: hidden;
}
.tab button {
background-color: #ccc;
border: none;
color: black;
float: left;
padding: 10px 15px;
margin-right: 5px;
cursor: pointer;
}
.tab button.active {
background-color: #fff;
}
.tabcontent {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
```
3. JavaScript中编写打开tab和加载HTML文件的函数。
```javascript
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
// 加载HTML文件
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(tabName).innerHTML = this.responseText;
}
};
xhttp.open("GET", tabName + ".html", true);
xhttp.send();
}
```
在以上代码中,首先我们通过传入事件对象和tab名称来打开指定的tab,并加载对应的HTML文件。实现方法是先将所有tab内容隐藏,然后将当前tab显示出来,将当前tab标签设为active状态,并执行XMLHttpRequest来请求对应的HTML文件并插入到指定的div中。