CODEWITHSUNDEEP
phphtmlcss
Arpit Patidar
Arpit Patidar

Reputation: 69

Update Header link class on page change php

I am trying to make a dynamic header in which header link classes update automatically when the page changes. so, like if the user in on index then HOME on header shows in red and if he is on folio page then folio shows in red and so on.

my code.

<?php
switch(basename($_SERVER['PHP_SELF'])){
    case "index.php":
        $index_hover = "act-link";
    break;

    case "portfolio.php":
        $folio_hover = "act-link";
    break;

}
?>
<style>
.act-link {color: red}
</style>
<div class="nav-holder">
   <a href="index.php" class="<?php echo $index_hover; ?>">Home</a>
   <a href="portfolio.php" class="<?php echo $folio_hover; ?>">Folio</a>
</div>

This code works as expected but the issues say I have 30 links in the header then it's not handy. so I want to make it dynamic so that it detects the page and update as per the need.

Thanks

Upvotes: 0

Views: 416

Answers (1)

Janak Prajapati
Janak Prajapati

Reputation: 886

From your question i think you want to add custom class in navigation menu associated with page

You can do it using php and javascript as well

Using PHP

<?php
function addActiveClass($page){
  $url_array =  explode('/', $_SERVER['REQUEST_URI']) ;
  $url = end($url_array);  
  if($page == $url){
      echo 'act-link'; //class name in css 
  } 
}
?>

 <ul>
    <li><a class="<?php addActiveClass('home.php');?>" href="http://localhost/Home.php">Home</a></li>
    <li><a class="<?php addActiveClass('aboutus.php');?>" href="http://localhost/aboutus.php">About us</a></li>
    <li><a class="<?php addActiveClass('contactus.php');?>" href="http://localhost/contactus.php">Contact us</a></li>
</ul>

Here i have added function on every anchor tag addActiveClass which adds class 'act-link' depending on argument passed

Using javascript(jquery)

$(document).ready(function() {
    var pathname = window.location.pathname;
    $('ul > li > a[href="'+pathname+'"]').parent().addClass('act-link');
})

<ul class="nav">
    <li><a href="/home.php">Home</a></li>
    <li><a href="/aboutus.php">About us</a></li>
    <li><a href="/contactus.php">Contact us</a></li>
</ul>

I have used jquery here if you want you can write code is core js as well

let me know if there is confusion

Upvotes: 1

Related Questions