javascript - Changing bootstrap navbar based on template -
so, want have same default bootstrap navbar on every page on website. if change name of 1 page (eg: page 1), want have changed across pages. understand, can use jquery load header separately. however, doesn't seem pull "active" class page active. how have "active" class on page active.
fyi, i'm using angularjs framework.
<!doctype html> <html lang="en"> <head> <title>bootstrap case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">websitename</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="">home</a></li> <!-- change ".active" class--> <li><a href="/page1">page 1</a></li> <li><a href="/page2">page 2</a></li> <li><a href="/page3">page 3</a></li> </ul> </div> </div> </nav> </body> </html>edit: also, links other pages change. example, if on page1, link home "../", link page2 "../page2", link "".
i don't know angularjs, use javascript web site:
$('.navbar').find('a').each(function() { if (window.location.href.indexof($(this).attr('href')) > -1) { $(this).parent().addclass('active'); } });
Comments
Post a Comment