如何根据菜单选择在母版页的内容部分显示不同内容的html页面

如何根据标题中的菜单选择在母版页的内容布局部分显示不同的内容页

假设我选择About->Mission我想显示HtmlPage1.html假设我选择About->Vision我想显示HtmlPage2.html

BasePage.html中的MyHeader菜单

您应该使用angular route模块中的ngRoute来显示带有模板/部分的内容。您需要添加而不是*此处的主要内容*来加载模板。这些部分不需要任何类似的标题，因为它们被插入到HTML中并呈现

下面是一个小演示：

var app=angular.modulemyApp[ngRoute]； app.configfunction$routeProvider{ $routeProvider .when/{ templateUrl:main.html } .when/page1{ templateUrl:HtmlPage1.html } .when/page2{ templateUrl:HtmlPage2.html } }; 主页 任务页 视觉页面

---

考虑使用和通过模板显示内容partials@AlekseySolovey你可以发布一些示例代码吗？谢谢@Aleksey Solovey当我运行此“我正在获取”页面时，没有响应错误等待或取消警报显示，当我单击“任务”或“愿景”时，它也没有导航到特定目标page@user1030181我指的是单独的文件没有标签，只有内容。这些脚本用于模拟单独文件的ng模板

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="./" class="navbar-brand">Bootstrap Menu</a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="HtmlPage1.html">Mission</a></li>
                                <li><a href="HtmlPage2.html">Vision</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Products</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li class="active">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

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

  </div>
  <div>