如何使用固定的引导程序导航栏显示不同的引导程序页面

Question

如何在 html 页面中显示不同的 html 页面（或不重新加载页面），并且始终将工作引导导航栏固定在顶部。我想将所有内容放在一个 HTML 页面中，只需更改容器的显示属性（隐藏或显示容器）每当我听到导航按钮被按下时。但这很混乱，因为整个网站几乎都在一个 html 文件中。我尝试使用 JQuery 的加载功能在容器内加载一个 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 页面中，该页面仅在按下“音乐库”时才加载动态优化性能网站希望）。 如果我错了，请纠正我。

如果我的解释似乎不清楚，请访问 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');
  });

})

检查演示

Answer 2

在 react js、angular 或 vue 成为常态（并且仍然使用 btw）之前实现这一点的一种流行方法是通过 php。

您创建不同的 .php 页面并通过 php 将一个公共 header.php 片段加载到它们的标题中。

所以感觉是头部保持静止，只有下面的部分发生变化。

例子：

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