CODEWITHSUNDEEP
phpjavascriptcss
Edwin Yip
Edwin Yip

Reputation: 4220

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

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!

Upvotes: 0

Views: 294

Answers (5)

qw3n
qw3n

Reputation: 6334

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>

Upvotes: 4

eds
eds

Reputation: 439

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.

Upvotes: 0

superUntitled
superUntitled

Reputation: 22547

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>

Upvotes: 0

Matt Mitchell
Matt Mitchell

Reputation: 41853

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; ?>

Upvotes: 0

Kangkan
Kangkan

Reputation: 15571

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>

Upvotes: 0

Related Questions