I am trying to make a dynamic php navigation system that shows the active tab, but can not seem to make the showing the active tab part work. While I have found easier ways to do this, they all require the use of php in the original file. I would like to be able to just call a function that returns or echoes the navigation and sets the active page. Any suggestions are super welcome!
My index.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Helps with rendering on different size machines -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Keeps user from scrolling -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Main CSS style -->
<link rel="stylesheet" href="media/css/mainStyle.css">
<!-- Import php form with functions for navigation-->
<title> Shoe Site </title>
</head>
<body>
<?php
require 'mainPhp.php';
echo Navigation();
?>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Welcome to the Shoe Site</h1>
<p class="lead">Description of site.</p>
</div>
<!-- use this on items that are on sale
<h3><span class="label label-primary" width="auto"> Items on Sale </span></h3>
-->
<!-- On Sale columns -->
<h2 class="sectionHeader"> Shoes on Sale Below </h2>
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Description</p>
<p><a class="btn btn-primary" href="#" role="button">Add to cart »</a></p>
<p><span class="label label-primary" width="auto">Sale! </span> </p>
</div>
</div>
</br>
<hr>
</br>
<!-- Regular Item columns -->
<h2 class="sectionHeader"> Entire Shoe Catalog </h2>
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Description</p>
<p><a class="btn btn-primary" href="#" role="button">Add to cart »</a></p>
</div>
</div>
<!-- Site footer -->
</br>
<hr>
<footer class="footer">
<p>© Brianna Jones XD</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
My mainPhp.php file:
<?php
function PageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
$current_page = PageName();
function Navigation(){
//can not get the page to stay active
$current_page = PageName();
echo ('
<div class="container">
<div class= "masthead">
<nav>
<h1 class="text-muted">Shoe Site</h2>
<ul class="nav nav-justified">
<li class="$current_page == \'index.php\' ? \'active\':NULL"><a href="index.php">Home</a></li>
<li class="$current_page == \'cart.php\' ? \'active\':NULL"><a href="cart.php">Cart</a></li>
<li class="$current_page == \'admin.php\' ? \'active\':NULL"><a href="admin.php">Admin</a></li>
</ul>
</nav>
</div>
');
}
?>
Try this piece of code for your mainPhp.php file
<?php
function PageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
$current_page = PageName();
function Navigation(){
//can not get the page to stay active
$current_page = PageName();
echo '<div class="container">';
echo '<div class= "masthead">';
echo '<nav>';
echo '<h1 class="text-muted">Shoe Site</h2>';
echo '<ul class="nav nav-justified">';
$btnActiveClass = ($current_page=='index.php') ? 'active' : 'NULL';
echo '<li class="'.$btnActiveClass.'"><a href="index.php">Home</a></li>';
$btnActiveClass = ($current_page=='cart.php') ? 'active' : 'NULL';
echo '<li class="'.$btnActiveClass.'"><a href="index.php">Cart</a></li>';
$btnActiveClass = ($current_page=='admin.php') ? 'active' : 'NULL';
echo '<li class="'.$btnActiveClass.'"><a href="index.php">Admin</a></li>';
echo '</ul>';
echo '</nav>';
echo '</div>';
echo '</div>';
}
?>