如何更改页面和维护导航栏答案

【问题标题】：How to change page and maintain the nav bar如何更改页面和维护导航栏
【发布时间】：2017-10-26 08:33:01
【问题描述】：

我用一个简单的导航栏写了一个 html 脚本。主页很好，但是当我点击“关于”页面重新加载时，我只想重新加载内容并维护导航栏。我正在使用引导程序。我该怎么做？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" ng-controller="HeaderController">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="file:///path/about.html">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul> 
    </div>
  </div>
</nav>
<div class="container">
  <!-- <form class="form-horizontal" action="/action_page.php"> -->
  <div class="row">
    <div class="col-*-10">
      <legend><h2>Title</h2></legend>
    </div>
  </div>
  <p>HOME!!!</p>
</div>
</body>
</html>

这是我的关于页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <p>ABOUT!!!!!!!!!!!!!!!!!</p>
</body>
</html>

【问题讨论】：

如果您使用的是纯 html css，那么您必须使用其样式表再次复制和粘贴整个导航元素
我可以换一种方式吗？
查看stackoverflow.com/questions/31954089/…

标签： javascript html css angular-ui-bootstrap

【解决方案1】：

您实际上应该使用路由器来实现这样的事情，ui-bootstrap 只是一个 UI 库。 The ui-router wiki explains how to accomplish this using multiple views per state.

假设我们有两个想要共享导航栏的状态，而不是定义 2 个状态并为每个状态提供 2 个视图，一个导航栏，另一个用于正文

为每个导航栏视图提供相同的控制器和模板

    $stateProvider      
      .state('stateA',{     
        views: {        
          'navbar@stateA': {        
            templateUrl: 'navbar.html', // <-- navbar html goes here    
            controller: 'navbarCtrl'        
          },        
          'body@stateA': {      
            templateUrl: 'report-table.html',       
            controller: 'StateACtrl'
          } 
        }       
      })
       .state('stateB',{        
        views: {        
          'navbar@stateB': {        
            templateUrl: 'navbar.html',     
            controller: 'navbarCtrl'    
          },        
          'body@stateB': {      
            templateUrl: 'report-table.html',       
            controller: 'StateBCtrl'    
          } 
        }       
      })

在你的标记中，你应该维护

<body>
    <!-- the router will replace this with your html files -->
    <div ui-view="navbar"></div>        
    <div ui-view="body"></div>  
</body>

【讨论】：

【解决方案2】：

在打开的 body 标记上，创建一个名为 start onLoad="start()" 的 javascript 函数，然后在函数内设置 innerhtml 导航栏代码。

HTML：

<body onLoad="start()">
   <div id="navbar"></div>
</body>

JS：

          function start() {
    document.getElementById("navbar").innerHTML = "<nav class="navbar navbar-inverse" ng-controller="HeaderController">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="file:///path/about.html">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul> 
    </div>
  </div>
</nav>";
        }

【讨论】：

【解决方案3】：

有几种方法可以做到这一点，而无需将整个导航栏复制到每个 HTML 文件中。

您可以将所有内容放在同一页面中，并在单击菜单链接时使用 JavaScript 隐藏/显示特定部分
您可以使用 JavaScript 通过 AJAX 检索新内容并更新容器。
您可以添加 JavaScript 来为您想要的每个页面动态创建导航栏。

【讨论】：