Question

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

<!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>

Answer 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>

Answer 2

在open 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>";
        }

Answer 3

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

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

如何更改页面并维护导航栏

3 个答案: