新增一个tools.html 页面 --chatGPT

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

gpt:

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

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

```html



 


 

Function1 Content

 

This is the content of Function1.

```

接下来，在 `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` 中添加更多的内容和功能。