如何修改代码实现选择下拉菜单选项后在当前页面展示文件内容而非跳转至新页面？

Hey! I get what you're trying to do—instead of jumping to a new page when picking a dropdown option, you want the file's content to show up right on the same page. Let's fix that with a little HTML tweak and some JavaScript magic:

Step 1: Update the HTML Structure #

First, we'll add a dedicated area where the file content will appear, and keep your existing dropdown setup (we just added a class to the links for easier targeting):

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="file1.txt" class="dropdown-link">Option 1</a>
    <a href="file2.txt" class="dropdown-link">Option 2</a>
    <a href="file3.txt" class="dropdown-link">Option 3</a>
  </div>
</div>
<!-- 新增内容展示容器 -->
<div id="content-display" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>

Step 2: Add JavaScript to Handle Clicks #

We'll use JavaScript to stop the default link navigation, fetch the file content, and display it in our new container:

// 获取所有下拉菜单链接和内容展示容器
const dropdownLinks = document.querySelectorAll('.dropdown-link');
const contentDisplay = document.getElementById('content-display');

// 为每个链接添加点击事件监听
dropdownLinks.forEach(link => {
  link.addEventListener('click', async (e) => {
    // 阻止浏览器默认的跳转行为
    e.preventDefault();
    
    // 获取链接指向的文件地址
    const fileUrl = link.getAttribute('href');
    
    try {
      // 发起请求获取文件内容
      const response = await fetch(fileUrl);
      if (!response.ok) {
        throw new Error(`加载失败：${response.statusText}`);
      }
      const content = await response.text();
      
      // 将内容展示到容器中
      contentDisplay.textContent = content;
    } catch (error) {
      // 加载出错时显示错误信息
      contentDisplay.textContent = `出错了：${error.message}`;
    }
  });
});

核心逻辑说明 #

• e.preventDefault(): 阻止浏览器默认的链接跳转行为，避免页面刷新或跳转。
• fetch(): 现代浏览器内置的API，用来异步获取文件资源，无需刷新页面。
• 错误处理: 加入try/catch块，在文件不存在或请求失败时，给用户展示友好的错误提示。

你还可以自定义content-display的样式，让它更贴合你的页面设计！

内容的提问来源于stack exchange，提问作者manjitolo