当我将 JavaScript 代码放入 script 标记内的 HTML 文件中时，我的 JavaScript 代码将起作用。如果我将代码放在单独的 .js 文件中，它将不会运行。
这是我一直在玩的一个虚拟文件。有效的代码:
<head>
<link rel="stylesheet" href="TabStyle.css">
</head>
<body>
<script>
function openCity(evt, cityName) {
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
无效的代码:
<head>
<link rel="stylesheet" href="TabStyle.css">
</head>
<body>
<script src="TabJS.js"></script>
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
最佳答案
我复制了您的示例，一切正常。这是一个屏幕截图，显示了文件夹中的文件结构和浏览器中的输出:
您可能放置了错误的文件或对代码的引用不正确。
检查以下内容:
- 文件在同一个文件夹中
- 引用JS文件如下:
<script src="TabJS.js"></script> - JS文件中没有标签，只有纯JavaScript
此外，您是否在浏览器的控制台(开发人员工具)中遇到任何错误？
关于Javascript src 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52592804/