我正在Ruby on Rails中构建一个应用程序。个人资料视图具有用于不同部分信息的选项卡。
以下是我的标签(使用布尔玛样式):
<div class="column">
<div class="tabs">
<ul>
<li class="is-active" onclick="openTab(event,'personal')"><a>Personal</a></li>
<li><a class="tab" onclick="openTab(event,'billing')">Billing</a></li>
<li class="tab" onclick="openTab(event,'portfolio')"><a>Portfolio</a></li>
<li class="tab" onclick="openTab(event,'transactions')"><a>Transactions</a></li>
</ul>
</div>
<div class="content">
<div id="personal" class="content-tab">
<p>Personal</p>
</div>
<div id="billing" class="content-tab" style="display:none">
<p>Billing</p>
</div>
<div id="portfolio" class="content-tab" style="display:none">
<p>Portfolio</p>
</div>
<div id="transactions" class="content-tab" style="display:none">
<p>Transactions</p>
</div>
</div>
</div>
这是app/assets/javascripts/application.js
中的Javascript函数(用于切换标签)。
/* exported openTab */
// Function to switch tabs
function openTab(evt, tabName) {
'use strict';
var i, x, tablinks;
x = document.getElementsByClassName("content-tab");
for (i = 0; i < x.length; i += 1) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i += 1) {
tablinks[i].className = tablinks[i].className.replace(" is-active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " is-active";
}
ESLint给我以下错误:
ERROR: 'document' is not defined. [no-undef] x = document.getElementsByClassName("content-tab");
ERROR: 'document' is not defined. [no-undef] tablinks = document.getElementsByClassName("tab");
ERROR: 'document' is not defined. [no-undef] document.getElementById(tabName).style.display = "block";
我已经阅读了很多答案,但是它们似乎都在使用jQuery作为我在项目中未使用的解决方案。有什么想法可以检查DOM是否已加载并摆脱此错误吗?这可能是一个简单的解决方案,但我更像是一个后端开发人员...