javascript - 如何在固定 Bootstrap 导航栏的情况下显示不同的 Bootstrap 页面

Question

如何在 html 页面内显示不同的 html 页面(或不重新加载页面)，并始终将工作 Bootstrap 导航栏固定在顶部。我想将所有内容放在一个 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');
  });

})

检查 Demo