javascript - Change external html header active menu -
i have external bootstrap navbar header include in every page as
<?php include("header.html");?> the external header html file given below:
<body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <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> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="homepage.php" >home</a></li> <li ><a href="aboutus.php">about us</a></li> <li><a href="#">events</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">members<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">4th year</a></li> <li><a href="#">3rd year</a></li> <li><a href="#">2nd year</a></li> <li><a href="#">1st year</a></li> </ul> </li> <li><a href="#">gallery</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li id="register"><a href="register.php"><span class="glyphicon glyphicon-user"></span>register</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>login</a></li> </ul> </div> </div> </nav> the problem facing changing active menu. tried various ways no success yet. please help if have idea.
you can either send variable through post/get using php , set class accordingly, or can seek using jquery find specific elements exist in each page , add together class accordingly, example
if ($('#specific-page-element-1').length) { $('menuelement-1').addclass('active'); } javascript jquery twitter-bootstrap-3
No comments:
Post a Comment