PHP set active link on page using includes
Question
So I have searched SO for an hour trying to find the answer, and also tried various methods, including this
I am trying to include my pages, along with the navigation. But on the correct page, I need the list-item to have a class of active . The navigation is in header.php and currently looks like this:
<nav>
<ul>
<li class="active"> <a href="/">Home</a> </li>
<li> <a href="#">Apps</a> </li>
<li> <a href="#">Forums</a> </li>
</ul>
</nav>
First, I have no idea if JS(jQuery) would be better, or if PHP was to be better. Both wouldn't matter if it works.
Also I am a bit new with PHP and trying to learn.
What would be the easiest (hopefully) method to use? So I don't have to change a lot of code just to give a nav class="active"
9 answers
solution1
30 ACCPTED 2011-12-12 14:59:14
Asumming you have a $page variable (which contains the name of the page you are currently on):
<nav>
<ul>
<li class="<?php echo ($page == "home" ? "active" : "")?>"> <a href="/">Home</a> </li>
<li class="<?php echo ($page == "apps" ? "active" : "")?>"> <a href="#">Apps</a> </li>
<li class="<?php echo ($page == "forums" ? "active" : "")?>"> <a href="#">Forums</a> </li>
</ul>
</nav>
solution2
8 2014-02-13 18:47:38
Here is a simple way where you do not need to add any other variable
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/index.php" ? "active" : "");?>">
<a href="index.php">Start</a>
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/about.php" ? "active" : "");?>">
<a href="about.php">About</a>
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/practices.php" ? "active" : "");?>">
<a href="practices.php">Practices</a>
</li>
solution3
0 2013-06-25 10:16:43
At page header use:
<?php $loc = this.location; ?>
Then at every link add:
<?php(this.href == $loc) ? echo 'class="active"' : '' ?>
solution4
0 2015-04-10 22:39:21
If you don't want to use jQuery or PHP - can do next:
- Give ID or different CLASS to each
<li>element in "your-include-nav.php". - Define the "active" style with CSS in
<head>section, on each page.
solution5
0 2018-08-04 12:49:29
define variable $page="index.php" in index.php page and for other pages change the variable value according to the page name
<li class="<?php echo ($page == "index.php" ? "active" : "")?>">
<a href="index.php">Home</a>
</li>
<li class="<?php echo ($page == "about.php" ? "active" : "")?>">
<a href="about.php">About</a>
</li>
<li class="<?php echo ($page == "service.php" ? "active" : "")?>">
<a href="service.php">Services</a>
</li>
<li class="<?php echo ($page == "contact.php" ? "active" : "")?>">
<a href="contact.php">Contact</a>
</li>
solution6
0 2018-09-29 18:11:13
Add basename function. Then it will work i hope.
solution7
0 2018-09-29 18:18:15
Add basename function before $_SERVER . I hope it will work.
echo (basename($_SERVER['PHP_SELF']) == 'yourPageName' ?'active' : " ");
solution8
0 2019-04-09 15:32:58
$page_url = $_SERVER['QUERY_STRING'];
$s = explode("&",$page_url);
//print $s[0];
$page = $s[0];
function createTopNav($page)
{
$pages = array(
array(
'name'=>'Feeder',
'link'=>'page=feeder'
),
array(
'name'=>'Services',
'link'=>'page=services'
),
array(
'name'=>'Development',
'link'=>'page=development'
),
array(
'name'=>'Design',
'link'=>'page=design'
),
);
$res = "";
foreach($pages as $key=>$val)
{
if($val['link']==$page)
{
$res.= "<a class=\"active\" href=\"?"
.$val['link'].
"\">"
.$val['name'].
"</a>";
}
else
{
$res.= "<a class=\"\" href=\"?"
.$val['link'].
"\" >"
.$val['name'].
"</a>";
}
}
$res.="";
return $res;
}
echo createTopNav($page);
solution9
0 2011-12-12 15:12:22
if you are using query string exmaple.com?page_id=Apps to pass page id than with php you can approach this thing
$page_id = $_REQUEST['page_id'];
<ul>
<li class="<?php echo ($page_id == "Home" ? "active" : "");?>">
<a href="/">Home</a>
</li>
<li class="<?php echo ($page_id == "Apps" ? "active" : "");?>">
<a href="#">Apps</a>
</li>
<li class="<?php echo ($page_id == "Forums" ? "active" : ""); ?>">
<a href="#">Forums</a>
</li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.