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
Post a Comment