新增一个tools.html 页面 --chatGPT_tools-build.html-CSDN博客

本文链接：https://blog.csdn.net/glc22/article/details/133710585

问：新增一个tools.html 页面，用户点击 Function1 时显示页面内容

gpt:

要实现用户点击 Function1 时，在右侧显示页面内容，你可以创建一个名为 `tools.html` 的新页面，然后在 `options.js` 中添加逻辑，以便在点击 Function1 时加载并显示该页面的内容。

首先，创建 `tools.html` 文件，其中包含 Function1 的相关内容。以下是一个示例 `tools.html` 文件的内容：

```html
<!DOCTYPE html>
<html>
<head>
<title>Function1 Page</title>
</head>
<body>
<h2>Function1 Content</h2>
<p>This is the content of Function1.</p>
</body>
</html>

```

接下来，在 `options.js` 中添加代码以处理点击 Function1 时的逻辑，并在右侧的内容容器中加载 `tools.html` 页面内容。以下是示例代码：

```javascript
// options.js

document.addEventListener("DOMContentLoaded", function () {
const functionList = document.querySelector(".function-list");
const contentContainer = document.querySelector(".content-container");

// 初始化默认选中的功能
let selectedFunction = null;

functionList.addEventListener("click", (event) => {
if (event.target && event.target.tagName === "LI") {
// 取消之前选中的功能的样式
if (selectedFunction) {
selectedFunction.classList.remove("selected");
}

// 设置新选中的功能样式
selectedFunction = event.target;
selectedFunction.classList.add("selected");

// 处理选中的功能，你可以根据需要执行相应的操作
const functionName = selectedFunction.dataset.function;

// 在这里处理 Function1 的点击事件
if (functionName === "function1") {
loadFunction1Content();
}
}
});

// 加载 Function1 页面内容
function loadFunction1Content() {
// 使用 fetch 加载 tools.html 页面内容
fetch("tools.html")
.then((response) => response.text())
.then((html) => {
// 将页面内容插入到右侧内容容器中
contentContainer.innerHTML = html;
})
.catch((error) => {
console.error("Error loading content:", error);
});
}
});
```

上述代码中，当用户点击 Function1 时，`loadFunction1Content` 函数将使用 `fetch` 方法加载 `tools.html` 页面的内容，并将内容插入到右侧的内容容器中。请确保 `tools.html` 位于与 `options.html` 同一目录下，以便能够正确加载页面内容。

这样，当用户点击 Function1 时，右侧将显示 `tools.html` 页面的内容。你可以根据需要在 `tools.html` 中添加更多的内容和功能。