CODEWITHSUNDEEP
phpcss
Amit Verma
Amit Verma

Reputation: 41219

Change menu active state on different pages

I am using a bootstrap pagination menu on my website to navigate from one page to another page.

I copied the pagination menu from :

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination_active&stacked=h and added this to all pages of my website .

It's works fine and I can set the Active Status using:

  <li class="active">
 <a href="pages/1.php">1</a></li>

according to the page link where the code is.

For some reasons ,I want to have only one menu file and include it to all pages .

Is there a way to automatically add ".active" class to the links in included menu?

menu.php

<ul class="pagination">
<li><a href="pages/1.php">1</a></li>
<li><a href="pages"pages/2.php">2</a></li>
<li><a href="pages/3.php">3</a></li>
<li><a href="pages/4.php">4</a></li>
</ul>

Please help!

Upvotes: 0

Views: 326

Answers (1)

shershen
shershen

Reputation: 9993

You can do it depending on your setup. In javascript, using jQuery for example:

var currentPage = 2; //say the page is defined like this
$('.pagination li').eq((currentPage-1)).addClass('active');

If you generating pages server side, for example in PHP

$currentPage = 2;
$output = '<ul class="pagination">';
//iterating pages
if($pageNum == $currentPage){
   $output .= <li><a class="active" href="pages/'+$pageNum+'.php">'+$pageNum+'</a></li>
} else {
   $output .= '<li><a href="pages/'+$pageNum+'.php">'+$pageNum+'</a></li>';
}
$output .= '</ul>'
echo $output;

Upvotes: 1

Related Questions