Hello I'm trying to make my navigation bar active in php, so that user can know in which page they are on. I'm new to php and don't know much about it. So how can I add a class="active" in this code to make a active nav bar and display all the page in same index.php page.
<a href="?page=home"> Home</a></br>
<a href="?page=news"> News</a></br>
<a href="?page=about"> About</a></br>
<a href="?page=contact"> Contact</a></br>
<?php
if (!isset($_GET['page'])) {
include "home.php";
} else {
switch ($_GET['page']) {
case "home":
include "home.php";
break;
case "news":
include "news.php";
break;
case "about":
include "about.php";
break;
case "contact":
include "contact.php";
break;
default:
include "home.php";
};
}
?>
Create an array of menu items and then use a foreach loop to generate the menu dynamically.
That way when you add new items to the array they will show up in the menu:
<html>
<head>
<title>Website</title>
<style type="text/css" media="screen">
.active {
font-weight: bold;
}
</style>
</head>
<body>
<?php
// This is your menu
$items = array("home", "news", "about", "contact");
foreach ($items as $item)
{
if (isset($_GET['page']) && $_GET['page'] == $item)
{
echo '<a href="?page=' . $item . '" class="active"> ' . $item . '</a></br>';
$activePage = $item . ".php";
}
else
{
echo '<a href="?page=' . $item . '"> ' . $item . '</a></br>';
}
}
// Include your page
if (isset($activePage))
{
include $activePage;
}
else
{
include "home.php";
}
?>
</body>
</html>
You should replace all of your code with this code and give it a spin. Using loops to reduce the amount of redundant markup you need to write is not only DRY but will save you a lot of time in the future!
You can use the PHP code below as navigation. I recommend that you use unordered list (i.e. <ul><li><a href=""></a></li></ul>) tags for navigation:
<ul>
<li<?php if($_GET['page']=="home") { echo " class=\"active\""; } ?>><a href="?page=home"> Home</a></li>
<li<?php if($_GET['page']=="news") { echo " class=\"active\""; } ?>><a href="?page=news"> News</a></li>
<li<?php if($_GET['page']=="about") { echo " class=\"active\""; } ?>><a href="?page=about"> About</a></li>
<li<?php if($_GET['page']=="contact"){ echo " class=\"active\""; } ?>><a href="?page=contact"> Contact</a></li>
</ul>
Then add the below style to CSS:
.active {
font-weight: bold;
}
Try this code:
<section id="section1">
<h2>London1</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<section id="section2" style="display:none">
<h2>London2</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<section id="section3" style="display:none">
<h2>London3</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<?php include 'footer.php'; ?>
<script type="text/javascript">
$(document).ready(function(){
$("#1").click(function(){
$("#section1").show();
$("#section2").hide();
$("#section3").hide();
});
$("#2").click(function(){
$("#section1").hide();
$("#section2").show();
$("#section3").hide();
});
$("#3").click(function(){
$("#section1").hide();
$("#section2").hide();
$("#section3").show();
});
})
</script>
<div id="nav">
<button id="1">London1</button><br>
<button id="2">2</button><br>
<button id="3">3</button><br>
</div>
<div id="nav">
<a href="index.php">paris1</a><br>
<a href="paris.php">pzris2</a><br>
<a href="tokyo.php">paris3</a><br>
</div>
<?php include 'header.php'; ?>
<?php include 'nav1.php'; ?>
<?php include 'footer.php'; ?>