How to redirect pages using JavaScript or Jquery

Question

Solution: I asked this question way back with little knowledge in Javascript. Anyway, the solution to this question lies here: How to redirect to another webpage in JavaScript/jQuery? .

I am buildin an application in phonegap. Phonegab uses HTML, JAVASCRIPT, CSS, AJAX and JSON etc. My goal is to not copy the navigation-bar into every file I create, since this is waste of time and memory.

In PHP, we can include php files.. But phonegab does not use PHP... So I have to figure another way to go to an page and back.

This is my code, I wish to go to an page for instance "ABOUT US", then callback. Please tell me if I am thinking wrong here...

  <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"> </span>
    <span class="icon-bar"></span>
  </button>
  <a style = "color:red;"class="navbar-brand" href="#">KPEC</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li><a href="#"><span class="glyphicon glyphicon-home" style="font-size:25px;" aria-hidden="true"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-edit" style="font-size:25px;" aria-hidden="true"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-stats" style="font-size:25px;" aria-hidden="true"></span></a></li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-list-alt" style="font-size:25px;" aria-hidden="true"></span></a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-cog" style="font-size:25px;" aria-hidden="true"></span><span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li class="divider"></li>
        <li><a href="#">8</a></li>
      </ul>
    </li>
  </ul>

</div><!-- /.navbar-collapse -->

Answer 1

It would be easy if you create a javascript function that will add the navigation bar dynamically some div of page. You can import that js in every page and call that function during page load.