如何根据头部菜单选择在母版页内容区显示不同HTML页面

看起来你想做的是单页式内容切换，而不是让菜单直接跳转到新页面——这个需求很常见，用jQuery或者原生JS都能轻松实现。下面给你一套具体的修改方案：

第一步：改造内容容器 #

首先给BasePage里的内容区域加个唯一ID，这样我们能精准定位到要替换内容的地方：

<div id="main-content" style="margin-top:100px; text-align:center;">
    **********************Main Content Here****************************
</div>

第二步：修改菜单链接 #

把About下拉菜单里的跳转链接改成不跳转的占位符，同时用data-page属性存储要加载的目标页面路径——这样既保留了菜单的视觉样式，又能传递我们需要的信息：

<ul class="dropdown-menu">
    <li><a href="#" data-page="HtmlPage1.html">Mission</a></li>
    <li><a href="#" data-page="HtmlPage2.html">Vision</a></li>
    <li><a href="#" data-page="HtmlPage3.html">Careers</a></li> <!-- 假设Careers对应HtmlPage3.html -->
</ul>

（如果其他顶级菜单比如Home/Products也需要同样的效果，也可以按这个格式修改）

第三步：添加切换逻辑的JavaScript #

在BasePage的底部（或者单独的JS文件里）加入这段代码，监听菜单点击事件并加载对应页面：

// 等待页面DOM加载完成
$(document).ready(function() {
    // 监听所有带data-page属性的菜单链接点击
    $('a[data-page]').on('click', function(e) {
        // 阻止默认的跳转行为
        e.preventDefault();
        // 获取要加载的页面路径
        var targetPage = $(this).data('page');
        // 把目标页面的内容加载到main-content容器里
        $('#main-content').load(targetPage);
    });

    // 可选：页面初始化时默认加载Home页面（如果有Home对应的HtmlPage）
    // $('#main-content').load('Home.html');
});

补充说明 #

• 如果你不想用jQuery，也可以用原生JS的fetch API实现：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('a[data-page]').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetPage = this.dataset.page;
            fetch(targetPage)
                .then(response => response.text())
                .then(html => {
                    document.getElementById('main-content').innerHTML = html;
                })
                .catch(error => console.error('加载页面失败:', error));
        });
    });
});

• 确保你的HtmlPage1.html、HtmlPage2.html这些文件里只有内容部分（不要包含完整的html/head/body标签），否则加载后会出现嵌套的页面结构，影响样式和功能。

这样修改后，点击About下的Mission/Vision，内容区就会直接加载对应的页面内容，不需要跳转到新页面啦！

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