如何更改使用php包含的下拉菜单项的类

Question

I have attached my header and navigation to my web pages using php include function. The navigation has an "active" class to indicate which page the user is currently viewing.

I successfully used the following code to achieve this for the regular list items.

<li <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="active"'; ?>><a href="index.php">Home</a></li>

But, I cannot figure out how to achieve this for the pages within a dropdown list item.

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="services.php">Services<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="services.php">Services</a></li>
            <li><a href="web-development.php">Web Development</a></li>
            <li><a href="graphic-design.php">Graphic Design</a></li>
        </ul>
</li>

The result that I am trying to achieve is, when the user is viewing the "Services", "Web Development", or "Graphic Design" page, the main "Services" list item will have a class= "active".

Answer 1

You can achieve this using client-side javascript.

I recommend using jQuery since is easy to use. Just include it in your html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

And use the addClass() function, for example:

<script>
$(function() {
  var url = window.location.href;
  if(url.indexOf("services.php") > -1)
    $('.dropdown-menu [href*=services.php]').addClass('active');
  //repeat the if statement for each case...
});
</script>