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

Question

i wrote a html script with a simple navbar. 我写了一个带有简单导航栏的html脚本。 The main page is fine but when i click on "About" the page reload and i just want to reload the content and maintain the navbar. 主页很好，但是当我单击“关于”时，页面将重新加载，我只想重新加载内容并维护导航栏。 I'm using bootstrap. 我正在使用引导程序。 How can i do this? 我怎样才能做到这一点？

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

And this is my about page: 这是我的关于页面：

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

You're actually supposed to implement such a thing using a router, ui-bootstrap is just a UI library. 实际上，您应该使用路由器来实现这样的事情，ui-bootstrap只是一个UI库。 The ui-router wiki explains how to accomplish this using multiple views per state . ui-router Wiki解释了如何使用每个状态的多个视图来完成此操作。

Let's say we have two states in which we want to have a shared navbar, than define 2 states and provide each with 2 views, one navbar and another for the body 假设我们要拥有一个共享导航栏的两个状态，然后定义两个状态并为每个视图提供2个视图，一个导航栏和另一个视图

Provide each navbar view the same controller and template 提供每个导航栏视图相同的控制器和模板

    $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'    
          } 
        }       
      })

Inside your markup, you should maintain 在标记内，您应该维护

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

Answer 2

On the open body tag, make a javascript function named start onLoad="start()" Then within the function set the innerhtml the navbar code. 在open body标签上，创建一个名为start onLoad="start()"的javascript函数，然后在该函数中设置innerhtml导航栏代码。

HTML: HTML：

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

JS: 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

There are a couple ways to do this without copying the whole navigation bar into every HTML file. 有几种方法可以将整个导航栏复制到每个HTML文件中。

You can put all of the content in the same page and use JavaScript to hide/show specific sections when you click on the menu link 您可以将所有内容放在同一页面上，并在单击菜单链接时使用JavaScript隐藏/显示特定部分
You can use JavaScript to retrieve the new content via AJAX and update the container. 您可以使用JavaScript通过AJAX检索新内容并更新容器。
You can add JavaScript to create the navigation bar on the fly for each page you want it on. 您可以添加JavaScript以便为每个页面即时创建导航栏。

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

问题描述

3 个解决方案

解决方案1
1 2017-05-26 07:16:39

解决方案2
0

解决方案3
0 2017-05-25 16:04:30

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

问题描述

3 个解决方案

解决方案1 1 2017-05-26 07:16:39

解决方案2 0

解决方案3 0 2017-05-25 16:04:30

解决方案1
1 2017-05-26 07:16:39

解决方案2
0

解决方案3
0 2017-05-25 16:04:30