單獨編寫css和js文件

Question

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

有一個很好的例子。 我想要第一部分

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>

和 javascript 部分

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

在單獨的文件中。 我將第一部分創建為 test.css，將第二部分創建為 test.js。 然后我做了

<head>
<link rel="stylesheet" href="test.css">
</head>

和

<script src="test.js"></script>

但沒有用。 我應該怎么做？

Answer 1

在“test.css”文件中，您應該刪除<style> ，與帶有<script>標記的“test.js”相同。

確保文件在您的文件夾中的同一級別，然后它應該可以工作。

您還應該將其放在 css 文件的頂部：

* {
maring: 0;
padding: 0;
box-sizing: border-box;

}

如果它仍然不起作用，您可能需要檢查代碼是否正確。 您只需將所有內容放入本機 html 文件即可完成此操作。

希望這有效！

單獨編寫css和js文件

問題描述

1 個解決方案

解決方案1
0 2021-03-27 16:05:13

單獨編寫css和js文件

問題描述

1 個解決方案

解決方案1 0 2021-03-27 16:05:13

解決方案1
0 2021-03-27 16:05:13