在菜单中的当前页面上设置CSS类

Question

I have a static website, but I have included different bits of the page (head, header, image slider, footer) by php's include function, to make the website manageable. Now the problem is that the current page's name in the menu-bar must have selected="selected" to show the current page's name pressed in the front end.

I made a solution of giving every menu-item an id and than injecting the following code to end of every page and setting that page's id (the home button id selected in the example code).

<script type="text/javascript">
    $(document).ready(function() {
        $('#home').addClass('active');
    });
</script>

Now the problem is that I must include this script in every page and to change the id to that page (eg in the above script I have pasted the code in the home page,

I wanna have a solution where I add only once chunk of the code to my footer.php and it automatically detect the current page and set the select="selected" for that menu-item.

Thank You all in advance...

Answer 1

In PHP, you can put the active class on your menu definition (if it's the same on every page), if you know the current page visited:

<ul>
   <li <?php if($current_page == 'home') echo 'class="active"'; ?>>Home</li>
   <li <?php if($current_page == 'blog') echo 'class="active"'; ?>>Blog</li>
   <li <?php if($current_page == 'contact') echo 'class="active"'; ?>>Contact</li>
</ul>

and so on... You don't need Javascript for this (which is disable by some users). The only need is to get the $current_page variable, which can be based on the URL or the ID of the page, depending on your current website architecture.

Answer 2

The solution I discovered for my (specific) problem is,
I gave id(s) to all the menu-items, and those ids were the namesake of the related files (the files to which they'll link), for example the button which links to the home.php was given the id of "home" and the button which was linking to the profile.php was given the id of "profile" than included the following code in the footer

<?php
$php_self = $_SERVER['PHP_SELF'];
$basename = basename($php_self);
$id = basename($basename, ".php");
?>

<script type="text/javascript">
   $(document).ready(function() {
      $('#<?php echo $id; ?>.addClass('active');
   });
</script>

( jQuery used, but if the website doesn't have jQuery already, than the document.getElementById must be used ).

Thank You all for Your time..

Answer 3

You can use js and php together:

$(document).ready(function(){
    $("#<?=$current_page?>").addClass('active')
})

It's shorter than Maxime Lorant's code...

Or if your url is something like site.com/#home , this is the solution: Get css id from url (without php/js)