I want to put my html navigation in a separate php file so when I need to edit it, I only have to edit it once. The problem starts when I want to add the class active to the active page.
I've got three pages and one common file.
common.php :
<?php $nav = <<<EOD <div id="nav"> <ul> <li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li> <li><a href="two.php">Tab2</a></li> <li><a href="three.php">Tab3</a></li> </ul> </div> EOD; ?>
index.php : All three pages are identical except their $page is different on each page.
<?php $page = 'one'; require_once('common.php'); ?> <html> <head></head> <body> <?php echo $nav; ?> </body> </html>
This simply won't work unless I put my nav on each page, but then the whole purpose of separating the nav from all pages is ruined.
Is what I want to accomplish even possible? What am I doing wrong?
Thanks
EDIT: When doing this, the php code inside the li don't seem to run, it's just being printed as if it was html
To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.
The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
why don't you do it like this:
in the pages:
<html> <head></head> <body> <?php $page = 'one'; include('navigation.php'); ?> </body> </html>
in the navigation.php
<div id="nav"> <ul> <li> <a <?php echo ($page == 'one') ? "class='active'" : ""; ?> href="index1.php">Tab1</a>/</li> <li> <a <?php echo ($page == 'two') ? "class='active'" : ""; ?> href="index2.php">Tab2</a>/</li> <li> <a <?php echo ($page == 'three') ? "class='active'" : ""; ?> href="index3.php">Tab3</a>/</li> </ul> </div>
You will actually be able to control where in the page you are putting the navigation and what parameters you are passing to it.
Later edit: fixed syntax error.
A very easy solution to this problem is to do this.
<ul> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>"><a href="index.php">Home</a></li> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'portfolio.php'){echo 'current'; }else { echo ''; } ?>"><a href="portfolio.php">Portfolio</a></li> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo ''; } ?>"><a href="services.php">Services</a></li> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'current'; }else { echo ''; } ?>"><a href="contact.php">Contact</a></li> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'links.php'){echo 'current'; }else { echo ''; } ?>"><a href="links.php">Links</a></li> </ul>
Which will output
<ul> <li class="current"><a href="index.php">Home</a></li> <li class=""><a href="portfolio.php">Portfolio</a></li> <li class=""><a href="services.php">Services</a></li> <li class=""><a href="contact.php">Contact</a></li> <li class=""><a href="links.php">Links</a></li> </ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With