Loading navbar into html page from different folders using javascript -


the following html source code structure.

products

software.html

hardware.html

index.html

main-navbar.html

scripts

load-main-nav.js

i have moved main navigation bar seperate file because repeats in every page , using javascript load respective pages. have empty div in pages want load navbar.

<div id="main-nav"></div> 

i have managed load navbar using jscript index.html page. when click software link goes respective page not show navigation bar. when changed javascript $("#main-nav").load("../main-nav.html"); displays navbar software page not index.html. there way change location part can use same script files in folders in project?

main-navbar.html

<nav class="navbar navbar-default mc-header navbar-static-top">     <div class="navbar-header">         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>         <a href="../index.html"><img id="logo" src="images/logo.svg" alt="company logo"></a>     </div>     <div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">         <ul class="nav navbar-nav navbar-right" >             <li><a href="products/software.html">software</a></li>             <li><a href="products/hardware.html">hardware</a></li>         </ul>     </div> </nav> 

load-main-nav.js

$(function(){     $("#main-nav").load("main-nav.html"); }); 

unfortunately no (at least i've found). spent while same problem on websites trying figure 1 out. if find answer kudos, left leaving home page ./ , of other pages using ../


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -