使用W3Schools下拉导航栏，点击外部链接后导航栏消失的解决方法

当前点击Link 1后跳转到了独立的mycontent.php页面，这个页面里没有导航栏代码，所以导航栏会消失。下面是两种最简单有效的解决方法：

方案一：PHP代码复用（最适合后端用PHP的场景） #

把导航栏代码抽成独立文件，在所有需要显示导航栏的页面里引入，实现代码复用：

1. 新建navbar.php文件，将你按照教程写的导航栏全部代码（包括下拉菜单的HTML、对应CSS）复制进去。
2. 在首页（比如index.php）和mycontent.php的最顶部，添加一行代码：

   <?php include 'navbar.php'; ?>
   

   注意：如果navbar.php和当前页面不在同一目录，要调整路径，比如include '../navbar.php';

方案二：无刷新加载内容（适合单页体验需求） #

修改链接逻辑，点击后不跳转页面，在当前页面指定区域加载mycontent.php内容，导航栏持续保留：

1. 在页面中添加内容容器，用于显示加载的内容：

   <div id="content-container" style="margin-top: 70px; /* 预留导航栏高度，避免内容被遮挡 */"></div>
   

2. 修改下拉菜单里的Link 1代码：

   <a href="javascript:void(0)" class="load-content" data-url="/content/mycontent.php">Link 1</a>
   

3. 添加JavaScript代码，监听点击事件并加载内容：

   // 获取所有带load-content类的链接
   document.querySelectorAll('.load-content').forEach(link => {
     link.addEventListener('click', async function() {
       const targetUrl = this.dataset.url;
       // 用fetch请求内容并渲染到容器
       const res = await fetch(targetUrl);
       const content = await res.text();
       document.getElementById('content-container').innerHTML = content;
     });
   });
   

   备注：如果mycontent.php包含完整HTML结构（如<html>、<body>标签），建议改用iframe加载，将JS内容替换为：

   document.getElementById('content-container').innerHTML = `<iframe src="${targetUrl}" style="width:100%; height: calc(100vh - 70px); border: none;"></iframe>`;
   

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