选项卡更改时,document.getElementById({IDHERE}).style.color不工作是因为该方法只能设置元素的内联样式,而不是外部样式。当使用该方法时,需要确保要更改颜色的元素具有内联样式。
如果想要在选项卡更改时改变元素的颜色,可以考虑以下解决方案:
例如,使用类名的解决方案:
HTML代码:
<div id="tabContent" class="tab-content">选项卡内容</div>
CSS代码:
.tab-content {
color: red;
}
.tab-content.active {
color: blue;
}
JavaScript代码:
// 监听选项卡更改事件
document.addEventListener('DOMContentLoaded', function() {
var tabs = document.querySelectorAll('.tab');
tabs.forEach(function(tab) {
tab.addEventListener('click', function() {
// 切换选项卡样式
tabs.forEach(function(tab) {
tab.classList.remove('active');
});
this.classList.add('active');
// 切换内容颜色
var tabContent = document.getElementById('tabContent');
tabContent.classList.toggle('active');
});
});
});
在上述代码中,为选项卡添加了一个监听器,在点击选项卡时,切换了选项卡的类名,并通过该类名来更改内容的颜色。
腾讯云相关产品介绍链接:
领取专属 10元无门槛券
手把手带您无忧上云