如何在固定了引导程序导航栏的情况下显示不同的引导程序页面

Question

如何在html页面内显示不同的html页面（或不重新加载页面），始终将工作引导导航栏固定在顶部。我想将所有内容放在单个HTML页面中并在每次听到导航按钮时更改容器的显示属性（以隐藏或显示容器）。但这很混乱，因为整个网站几乎都在一个html文件中。我尝试使用JQuery的load函数来加载容器中的html页面。但这没用。

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

在上面的代码中，我需要更改当前html页面的内容以显示保留导航栏的音乐库（此样式应该出现在另一个html页面中，只有在动态按下“音乐库”时才会加载该HTML页面网站的性能）。 如果我错了，请纠正我。

如果我的解释不清楚，请访问www.gaana.com。这是我想要的确切功能。

什么是优雅的设计？

非常感谢您的帮助。

Answer 1

使用JavaScript更新答案

您不需要使用PHP来更改内容。您可以使用JavaScript。如果您关注网站的速度性能，请使用JavaScript。

JS

$(function(){

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

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

})

检查Demo

Answer 2

在通过php来实现js，angular或vue成为规范之前（并且仍然被使用）的一种流行的方法。

您创建了不同的.php页面，并通过php在其标头中加载了一个通用的header.php代码段。

所以感觉是标题保持不动，只有下面的部分改变了。

示例：

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