0
429
ViewsChange which a-tag is highlighted depending on active page
So I have a menu with different items
<div class="right-nav">
<a href="/metrics/website/index" class="active">Home</a>
<a href="/metrics/website/pages/archives">Archives</a>
</div>
The class="active" highlights the menu item, and I was wondering how I could make this class change depending on which page I was on. So if the user visited Archives, then that has class="active".
The class is just a simple color
.topnav a.active {
/* When a-tags inside this class has been clicked - do highlight*/
color: var(--selected-nav-page);
}
All my html code is run inside php files.
UPDATE
Might have found something that works, using php, what do you guys think?
Made a php script which checks what page I'm on, and writes active or not in my a-tags.
<?php
function active($currect_page){
$url = str_replace(".php", "", basename($_SERVER['PHP_SELF'])); //name without .php
if($currect_page == $url){
echo 'active'; //class name in css
}
}
?>
<div class="right-nav">
<a href="#index" class="<?php active('index'); ?> active">Home</a>
<a href="#archives" class="<?php active('archives'); ?>">Archives</a>
</div>
3 answers
Answer question0
Since I dont use the .php on my pages, I remove that part from the filename. Beside that I use the basename of PHP_SELF, to get the name of the current file. If that is equal to the name in the menu function, then write active. Only problem here would be if I had two files with same name in different directories, and added them to the menu. Because then both would be highlighted, which is why I added basename(getcwd()), to get the parent directory, then also includes that the function should be called with it's parent name like active('website/index')
<?php
function active($currect_page){
$url = basename(getcwd())."/".str_replace(".php", "", basename($_SERVER['PHP_SELF']));
//If filename is just "name" or "name.php"
//Also checks which directory the file is in, to avoid highlighting multiple menu items with same name
//$currect_page == $url :: parentFolder/fileName == parentFolder/fileName (without .php here)
if($currect_page == $url || $currect_page == basename(getcwd())."/".basename($_SERVER['PHP_SELF'])){
echo 'active'; //class name in css
}
}
?>
<div class="right-nav">
<a href="/metrics/website/index" class="<?php active('website/index'); ?>">Home</a>
<a href="/metrics/website/pages/archives" class="<?php active('pages/archives'); ?>">Archives</a>
</div>
0
If I'm understanding you properly, you have two separate pages, one titled archive and the other titled Home. You want to be able to highlight the name of the page that is currently open.
I would suggest that, since you have two pages on two documents, you should be able to move the class to the other option on the site you want it to appear as such.
<DOCTYPE HTML>
<head>
<style>
.topnav a.active {
color: (colour you pick);
}
</style>
</head>
<body>
<div class="right-nav">
<a href="/metrics/website/index" class="active">Home</a>
<a href="/metrics/website/pages/archives">Archives</a>
</div>
</body>
</html>
0
You can change the class like so:
document.getElementById("<arcive_id>").class = "active";