How to set class for a html tag when loading the page?

Question

The problem: I want to use PHP include to import file "header_menu.html" into all pages that share the same navigation menus, but each page has its own current highlighted menu item.

For example, the following are the menus, in index.php, only the first should be set to "current" class, and in download.php, only the second should be current. How to do that with JavaScript? Can you provide a detailed working sample? You know, I don't want to duplicate the menus in each page...

<li><a href="../index.php" class="current">Home</a></li>
<li><a href="../download.php">Download</a></li>
<li><a href="../purchase.php">Buy</a></li>

Thank you!

---

Edit: PHP solutions are also welcomed!

Answer 1

The best solution is with php. There is a function that tells what page is calling it. You put that in the include and use an if statement to decide which menu item to set to class="current"

Here is the function I found on the internet that helped me do it

<?php
$a = basename($_SERVER['REQUEST_URI'], ".php"); /* supposing filetype .php*/
?>

Then the code in the header would look like

<li <?php if($a=='index' || $a==''){echo("class='current'");}?>><a href='index.php'>Home</a></li>
<li <?php if($a=='download'){echo("class='current'");}?>><a href='download.php'>Download</a></li>

Answer 2

What I am doing is parsing the current page url and setting the class current. So I am using javascript for this. I have a method in javascript that finds the current page and in the navigation menu, I query this method to find whether the item in the menu is current or not. It goes like this

<script language="javascript">
    function isCurrentPage(inputPage)
        {
            /*..code goes here..
            returns "current" if true*/

        }
</script>

<li><a href="../index.php" class="<script>isCurrentPage("index.php");</script>">Home</a></li>
<li><a href="../download.php" class="<script>isCurrentPage("download.php");</script>">Download</a></li>
<li><a href="../purchase.php" class="<script>isCurrentPage("purchase.php");</script>">Buy</a></li>

Answer 3

How do you currently determine which one should be "current"? Is it based on filename?

If so, just use PHP:

<?php
    $pages = array('Home' => 'index.php', 
      'Download' => 'download.php', 
      'Buy' => 'purchase.php');

    foreach ($pages as $pagename=>$filename) :
       $class = "";
       if (strpos($filename, $_SERVER["SCRIPT_NAME"]) !== -1)
       {
           $class = ' class="current"';
       }
?>

<li>
  <a href="../<?=$filename?>"<?=$class?>> 
    <?=$pagename?> 
  </a>
</li> 

<?php endforeach; ?>

Answer 4

Just use php...

Before you include the header.php file, set a php variable like: $index = "1"; or $download = "1";

Then, in your `<a`> tag, use php again like this:
<li><a href="../index.php" <?php if(isset($index)) echo 'class="current"'>Home</a></li>
<li><a href="../download.php" <?php if(isset($download)) echo 'class="current"'>download</a></li>

Answer 5

There are many ways to accomplish this, but the way to set the class via JavaScript is to use the setAttribute method:

<a id="home" href="./index.php">Home</a>

<script type="text/javascript">

var link = document.getElementById('home');
link.setAttribute('class', 'here');

</script>

You can also use getElementsByTagName('a') and return an array of all the links, then compare their href attribute (using getAttribute('href') ) to determine the current page. Like I said, there are many ways you can accomplish that part, including just using PHP.