how to add dynamic Active class on selected page [closed] - php

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
http://hotelshimlahill.com/demo/
this website I've made in bootstrap,
the header section including nav bar is coming from a separate file called 'header.php'
Now i want to add active class for each page on which user is visiting.
how can i do that? Kindly assist me.
Thankyou.

Answer 1

In your individual page such as about.php, services.php, you can do:
$currentPage = 'about'; // current page is about, do the same for other page
include('header.php');
Then in your header.php, you can check:
<ul class="nav navbar-nav">
<li class="<?php if($currentPage =='about'){echo 'active';}?>" >Home</li>
<li class="<?php if($currentPage =='services'){echo 'active';}?>" >about</li>
</ul>
Or you can try to use jQuery as well:
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});

Answer 2

All menu links are inside ul > li. so, give id to all li. and on each page by using jquery addClass "active" to li.

Answer 3

in you bootstrap css you find this line i think it should be at line no 4841
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
background-color: #5C0000;
color: #FFFFFF;
}
you change this line as
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a.active{
background-color: #5C0000;
color: #FFFFFF;
}
now in your project file find the section where the navigation generated those line
<ul class="nav navbar-nav">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>facilities</li>
<li>booking</li>
<li>testimonials</li>
<li>careers</li>
<li>contact Us</li>
</ul>
then change it as accrodinly
<ul class="nav navbar-nav">
<li><a href="index.php" <?php if($active=='Home') echo "class='active'"; ?>>Home</a></li>
<li><a href="about.php" <?php if($active=='about') echo "class='active'"; ?>>about</a></li>
<li><a href="services.php" <?php if($active=='services') echo "class='active'"; ?>>services</a></li>
<li><a href="facilities.php" <?php if($active=='facilities') echo "class='active'"; ?>>facilities</a></li>
<li><a href="reservations.php" <?php if($active=='booking') echo "class='active'"; ?>>booking</a></li>
<li><a href="testimonials.php" <?php if($active=='testimonials') echo "class='active'"; ?>>testimonials</a></li>
<li><a href="careers.php" <?php if($active=='careers') echo "class='active'"; ?>>careers</a></li>
<li><a href="contactUs.php" <?php if($active=='contact') echo "class='active'"; ?>>contact Us</a></li>
</ul>
then you have to a litle bit change in every files that you have in navigation link
such as
index.php
add this line at the top of the file that i mention on the navigation link
<?php $active ='Home'; ?>
and for about.php
<?php $active ='about'; ?>
I think it of course select of your active page
thnaks