导航栏加载所有html页面而不刷新每个页面

Question

我制作包含导航栏的navbar html页面我想在我的所有页面中加载它

<nav class="navbar navbar-inverse">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html" id="navbar-title"></a>
        <a class="navbar-brand" href="index.html">eLibrary</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="add-book.html">Add Book</a></li>
            <li><a href="view-book.html">View Book</a></li>
            <li><a href="#">Issue Book</a></li>
            <li><a href="#">View Issued Book</a></li>
            <li><a href="#">Return Book</a></li>
            <li><a href="index.html">Logout</a></li>
        </ul>
    </div>
</div>

我为每个页面制作js文件并在其上加载导航栏，它正常工作但问题出在导航中，当我将表单项目导航到另一个项目时，它几乎加载了单击项目的页面，但似乎页面刷新，我想要导航栏要立即出现我怎么能做到？