Home/ Questions/Q 8818435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T05:06:17+00:00

My main aim is add an active class, to a unordered li. This is

  • 0

My main aim is add an active class, to a unordered li. This is based on the a specific page the user is based on. Basically a conditional format. I hope to create a responsive design but I am currently learning jQuery on MAMP.

Current slow way…

HTML

<nav id="main-site-nav" class="main-menu">
 <ul>
  <li><a href="index.php" class="crnt-page">Home</a></li>
  <li><a href="/services.php">Services</a></li>
  <li><a href="/certification.php" >Certification</a></li>
  <li><a href="/customers.php">Customers</a></li>
  <li><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>

CSS

#main-site-nav .crnt-page {
 color: #E8A317;
 text-decoration:none;
}

I am having to add the class for every li. I wish to do this in my main.js at the bottom of the page. Any help would be grateful.

UPDATE!

This was the final PHP solution. Although I am tempted to port this across to WordPress.

<nav id="main-site-nav" class="main-menu">
  <ul>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="crnt-page"';?>href="index.php">Home</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'services.php')) echo 'class="crnt-page"';?>href="/services.php">Services</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'certification.php')) echo 'class="crnt-page"';?>href="/certification.php">Certification</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'customers.php')) echo 'class="crnt-page"';?>href="/customers.php">Customers</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact-me.php')) echo 'class="crnt-page"';?>href="/contact-me.php">Contact Me</a></li>
  </ul>
</nav>

Thanks for the quick responses! Now I just have to get used to this pre-formatted code option in stack overflow 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do this using PHP.

    Here is the PHP idea,

    <nav id="main-site-nav" class="main-menu">
 <ul>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'index.php') echo 'class="crnt-page"'; ?>><a href="index.php" class="crnt-page">Home</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'services.php') echo 'class="crnt-page"'; ?>><a href="/services.php">Services</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'certification.php') echo 'class="crnt-page"'; ?>><a href="/certification.php" >Certification</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'customers.php') echo 'class="crnt-page"'; ?>><a href="/customers.php">Customers</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'contact-me.php') echo 'class="crnt-page"'; ?>><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>
    • 0