How to display different bootstrap pages with a bootstrap navigation bar fixed

Question

How to display different html pages inside a html page (or without page reload) with a working bootstrap navigation bar fixed at the top all the time.I thought of putting all the contents in a single HTML page and just change the display property of containers(to hide or display containers)whenever I hear a navigation button being pressed.But this is quite messy as the whole website is almost in a single html file.I tried using JQuery's load function to load a html page inside a container.But it didn't work.

<nav id="navid" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <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>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#myPage">Explore Music</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#trending_music">Trending Music</a></li>
        <li><a href="#about_us">About us</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li><a href="#">Music Library</a></li>
        <li><button id="lscallbutton" type="button" class="btn navbar-btn btn-success" data-toggle="modal" data-target="#loginsignuppopup">Login/Signup</button></li>
        <li><button id="signoutbtn" type="button" class="btn navbar-btn btn-danger" style="display: none" onclick="signoutuser(1);">Sign-out</button></li>
      </ul>
    </div>
  </div>
</nav>

In the above code,I need to change contents of current html page for displaying the music library retaining the navigation bar(this styling should be present in another html page which is loaded only when the "Music Library" is pressed dynamically optimizing the performance of the website hopefully). Please correct me if I was wrong.

If my explanation seems unclear please visit www.gaana.com .This is the exact functionality I want.

What is an elegant design for this?

Thanks a lot for the help.

Answer 1

Update Answer by using JavaScript

You don't need to use PHP to change the content. You can use JavaScript. If you focus speed performance on your website use JavaScript.

JS

$(function(){

  $('#portfolio').click(function(){
    $('.home').addClass('hide');
    $('.portfolio').removeClass('hide');
  });

  $('#home').click(function(){
    $('.portfolio').addClass('hide');
    $('.home').removeClass('hide');
  });

})

Check Demo

Answer 2

A popular way to achieve this before react js, angular or vue became the norm (and still used btw) is through php.

You create different .php pages and load in their header through php a common header.php snippet.

So the feeling is that the header stays still and only the part below changes.

Example:

<div id="header">
<?PHP include_once('header.php');?>
</div>
<div id="main">
Main content
</div>