javascript选项卡切换
时间: 2024-01-16 18:02:28 浏览: 24
以下是一个使用JavaScript实现选项卡切换的例子:
```javascript
// 获取选项卡的父元素
var tabsContainer = document.getElementById("tabsContainer");
// 获取所有的选项卡
var tabLinks = tabsContainer.getElementsByTagName("li");
var tabContents = tabsContainer.getElementsByClassName("tabHide");
// 遍历所有的选项卡
for (var i = 0; i < tabLinks.length; i++) {
// 给每个选项卡添加点击事件
tabLinks[i].addEventListener("click", function() {
// 移除所有选项卡的活动状态
for (var j = 0; j < tabLinks.length; j++) {
tabLinks[j].classList.remove("active");
tabContents[j].classList.remove("active");
}
// 添加当前选项卡的活动状态
this.classList.add("active");
var linkedDivID = this.getAttribute("linkedDivID");
document.getElementById(linkedDivID).classList.add("active");
});
}
```