I have a header.php file included in index.php and on other pages of my website. In my header tab I have a navbar and I want to make each tab active according to the respective page. Ex(About page - about tab color should change, for contact - contact tab shoud change color)
I would recommend include on top (before loading header.php) name of the file. Then in header you can make simple statement, f.ex.
$page_title = 'Home Page';
And then in header.php, in you nav menu:
<a href='#' class='someClass <?php echo $page_title === 'Home Page' ? 'active' : ''; ?>"> Home Page </a>
And 'active' class will be responsible for styles for current page.
You could do this entirely within CSS. Given the following header HTML:
<nav class="header">
<ul>
<li class="home"><a href="/home.php">Home</a></li>
<li class="about"><a href="/about.php">About</a></li>
<li class="contact"><a href="/contact.php">Contact</a></li>
</ul>
</nav>
You would then add the classes "home", "about", and "contact" to the <body>
tag of your Home, About, and Contact pages, respectively. Then, you create the following CSS:
body.home nav li.home,
body.about nav li.about,
body.contact nav li.contact {
background-color: red; /* or however you want to style the active tab */
}