制作一个简单的目录并使用外部文件进行更新可以通过以下步骤实现:
<!DOCTYPE html>
<html>
<head>
<title>目录</title>
</head>
<body>
<ul id="directory">
<!-- 这里将用于动态添加目录项 -->
</ul>
<script src="script.js"></script>
</body>
</html>
// 定义目录数据
var directoryData = [
{ name: "首页", url: "index.html" },
{ name: "产品", url: "products.html" },
{ name: "关于我们", url: "about.html" },
// 可以根据需要添加更多目录项
];
// 获取目录容器
var directory = document.getElementById("directory");
// 动态生成目录项
for (var i = 0; i < directoryData.length; i++) {
var item = document.createElement("li");
var link = document.createElement("a");
link.href = directoryData[i].url;
link.textContent = directoryData[i].name;
item.appendChild(link);
directory.appendChild(item);
}
<ul>
标签中添加一个id属性,用于在JavaScript中获取目录容器。<script>
标签中引入script.js文件。通过以上步骤,你可以制作一个简单的目录,并使用外部文件进行更新。当你需要添加、删除或修改目录项时,只需编辑script.js文件中的directoryData数组即可。页面加载时,JavaScript会根据数组中的数据动态生成目录项,并将其添加到HTML中。
领取专属 10元无门槛券
手把手带您无忧上云