在没有使用jQuery的情况下更改活动选项卡,可以使用原生的JavaScript来实现。
步骤如下:
document.getElementsByClassName
或document.querySelectorAll
方法选择相应的元素。addEventListener
方法来为每个选项卡添加点击事件的处理函数。active
),然后为当前点击的选项卡添加活动类。同时,隐藏所有的内容元素,然后显示与当前选项卡对应的内容元素。示例代码如下:
// 获取选项卡元素和内容元素
var tabElements = document.getElementsByClassName('tab');
var contentElements = document.getElementsByClassName('content');
// 添加事件监听器
for (var i = 0; i < tabElements.length; i++) {
tabElements[i].addEventListener('click', function() {
// 移除所有选项卡的活动类
for (var j = 0; j < tabElements.length; j++) {
tabElements[j].classList.remove('active');
}
// 添加当前选项卡的活动类
this.classList.add('active');
// 隐藏所有内容元素
for (var k = 0; k < contentElements.length; k++) {
contentElements[k].style.display = 'none';
}
// 显示与当前选项卡对应的内容元素
var targetId = this.getAttribute('data-target');
document.getElementById(targetId).style.display = 'block';
});
}
上述代码假设选项卡元素具有tab
类,内容元素具有content
类,并且通过data-target
属性指定了每个选项卡对应的内容元素的id。
这种方法适用于任何网页项目,不依赖于特定的云计算品牌商。
云+社区技术沙龙[第10期]
云+社区技术沙龙[第28期]
T-Day
Hello Serverless 来了
技术创作101训练营
云+社区技术沙龙[第17期]
云+社区开发者大会(苏州站)
云+社区技术沙龙第33期
DBTalk
领取专属 10元无门槛券
手把手带您无忧上云