Highlight current page using CSS and Javascript
I was able to do this when I click "speak" and then adds a class that I named "active", however it does not remove the previous "active" ones on the main page
Here is my HTML
<nav id="main-nav" role="navigation">
<ul>
<li>
<a href="/" data-description="Welcome">Home</a>
</li>
<li>
<a href="/about" data-description="Learn more">About</a>
</li>
<ul>
</nav>
and here is my javascript
function setActive() {
aObj = document.getElementById('main-nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
window.onload = setActive;
Basically, I want this to be done:
When on the main page it adds an "active" class so that I can highlight the link with CSS.
Then when I click "About" it removes the "active" class from home (thus removing the highlighted CSS) and adds the "active" class to (adding the highlighted css).
source to share
Just add aObj[i].className = "";
before the if condition.
function setActive() {
aObj = document.getElementById('main-nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
aObj[i].className = "";
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
window.onload = setActive;
This is mainly done to remove each class from all links and only add the active class if it is the correct page. But since the page seems to be updating, I don't know how the class will persist from one page to another, so it would be helpful to have a link to the code.
source to share
I checked the source of your page and I think the problem is with how the links are created (the JavaScript code you posted is fine).
PROBLEM: Home Tab URL -
https://dhctranslations.com/
And other urls (hrefs) in navigation:
About Tab - https://dhctranslations.com/about
Certified Translation Tab - https://dhctranslations.com/certified-translation-services
Pricing Tab - https://dhctranslations.com/pricing
...
...
The check you do in your function is the "indexOf" check. This is why the condition always returns true for the Home tab (since this portion of the URL is common to all other links).
PROPOSAL: To fix this, you can either change the "indexOf" check or replace it with an equality check in your code OR change the URL of the "Home" tab to something like
https://dhctranslations.com/home
Please note that these are just my suggestions and I'm sure you can develop a solution that better suits your application design / architecture.
UPDATE: Here is the modified code that works (note that this is only to give you an idea and is not a clean solution at all)
aObj = document.getElementById('main-nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
aObj[i].className = "";
// Changed the condition
// Concatenated the "/" for comparison as the array does not have trailing "/"s stored
if(document.location.href === aObj[i].href+"/") {
aObj[i].className='active';
}
}
source to share