I want to style a navigation anchor element whenever an user clicks on it and it loads a page to be different. I want that particular selected page to have the style: #active{ color: red; border-bottom: 3px solid red; }
.
I managed to almost achieve that by using an "onclick" event on each anchor element inside the div with class menu; that "onclick" event calls for a function named changeStyle(this) and gives as an argument the current anchor as an object.
In the javascript file I have created the following function:
function changeStyle(sender) {
var anchorsArray = document.querySelectorAll('.menu a');
switch (sender.innerHTML) {
case "ACASA":
anchorsArray[0].setAttribute("id", "active");
anchorsArray[1].removeAttribute("id");
anchorsArray[2].removeAttribute("id");
anchorsArray[3].removeAttribute("id");
anchorsArray[4].removeAttribute("id");
anchorsArray[5].removeAttribute("id");
break;
case "ECHIPA":
anchorsArray[1].setAttribute("id", "active");
anchorsArray[0].removeAttribute("id");
anchorsArray[2].removeAttribute("id");
anchorsArray[3].removeAttribute("id");
anchorsArray[4].removeAttribute("id");
anchorsArray[5].removeAttribute("id");
break;
case "SERVICII SI TARIFE":
anchorsArray[2].setAttribute("id", "active");
anchorsArray[0].removeAttribute("id");
anchorsArray[1].removeAttribute("id");
anchorsArray[3].removeAttribute("id");
anchorsArray[4].removeAttribute("id");
anchorsArray[5].removeAttribute("id");
break;
case "GALERIE FOTO":
anchorsArray[3].setAttribute("id", "active");
anchorsArray[0].removeAttribute("id");
anchorsArray[1].removeAttribute("id");
anchorsArray[2].removeAttribute("id");
anchorsArray[4].removeAttribute("id");
anchorsArray[5].removeAttribute("id");
break;
case "OFERTE":
anchorsArray[4].setAttribute("id", "active");
anchorsArray[0].removeAttribute("id");
anchorsArray[1].removeAttribute("id");
anchorsArray[3].removeAttribute("id");
anchorsArray[2].removeAttribute("id");
anchorsArray[5].removeAttribute("id");
break;
case "CONTACT":
anchorsArray[5].setAttribute("id", "active");
anchorsArray[0].removeAttribute("id");
anchorsArray[1].removeAttribute("id");
anchorsArray[3].removeAttribute("id");
anchorsArray[4].removeAttribute("id");
anchorsArray[2].removeAttribute("id");
break;
default:
break;
}
}
and this changeStyle(sender) function verifies each object's .innerHTML value and if it matches it with a case it changes the style of that anchor element. Everything is ok here, but if I try to link other pages to the menu this function won't work properly when the new page is loaded and I don't have any ideea how to achieve this using just JavaScript with no jQuery or PHP.
What I'm trying to say is if I change the "href" attribute of each <a>
element from "#" to let's say "index.html" the page will reload when I click on it, but the function will not be called anymore and the style will be reset to it's default behavior.
Bellow is the DEMO of what I'm trying to achieve : https://jsfiddle.net/bookw0rm/18x0puwm/11/
Try changing the <a href="#" class="butoane butonAcasa" onclick="changeStyle(this);">ACASA</a>
to <a href="index.html" class="butoane butonAcasa" onclick="changeStyle(this);">ACASA</a>
in the fiddle DEMO to see what I'm trying to achieve and to see what doesn't work for me because it will help you understand my exact need.
I don't mind if you show me other ways to achieve this thing using JavaScript only ... it only matters to me to achieve it by using JavaScript only with NO jQuery or PHP. Thanks in advance.
I really dislike that piece of code where everything repeats - below is a slightly optimized version of it. The point is to use a single look to remove the active id from all the elements, and then just add it to the clicked one:
function changeStyle(sender) {
var anchorsArray = document.querySelectorAll('.menu a');
for(var i = 0; i < anchorsArray.length; i++) {
anchorsArray[i].removeAttribute("id");
}
sender.setAttribute("id", "active");
}
body{
width: 100%;
height: 100%;
min-height: 1200px;
margin: 0;
padding: 0;
border: 0;
background-image: url("../images/background/background.png");
background-repeat: repeat;
}
.wrapper{
// TO DO
}
.header{
position: relative;
top: 80px;
width: 948px;
height: 66px;
margin: 0 auto;
background-color: #f5f2f3;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border: 3px solid black;
}
#logoImage{
display: block;
position: relative;
top: -63px;
margin: 0 auto;
}
.menu{
position: absolute;
top: 0px;
width: 948px;
height: 66px;
}
.menu a{
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
color: black;
}
#active{
color: red;
border-bottom: 3px solid red;
}
.butoane{
font-weight: 700;
}
.butoane:hover{
border-bottom: 3px solid red;
}
.butonAcasa{
position: relative;
top: 23px;
margin: 0px 20px 0px 20px;
}
.butonEchipa{
position: relative;
top: 23px;
margin: 0px 20px 0px 5px;
}
.butonServicii{
position: relative;
top: 23px;
margin: 0px 20px 0px 5px;
}
.butonGalerie{
position: relative;
top: 23px;
margin: 0px 7px 0px 240px;
}
.butonOferte{
position: relative;
top: 23px;
margin: 0px 10px 0px 15px;
}
.butonContact{
position: relative;
top: 23px;
margin: 0px 0px 0px 15px;
}
<div class="wrapper">
<div class="header">
<img src="http://oi67.tinypic.com/25rmcde.jpg" alt="logo" title="Z-DENT" id="logoImage">
<div class="menu">
<a href="#" class="butoane butonAcasa" onclick="changeStyle(this);">ACASA</a>
<a href="#" class="butoane butonEchipa" onclick="changeStyle(this);">ECHIPA</a>
<a href="#" class="butoane butonServicii" onclick="changeStyle(this);">SERVICII SI TARIFE</a>
<a href="#" class="butoane butonGalerie" onclick="changeStyle(this);">GALERIE FOTO</a>
<a href="#" class="butoane butonOferte" onclick="changeStyle(this);">OFERTE</a>
<a href="#" class="butoane butonContact" onclick="changeStyle(this);">CONTACT</a>
</div>
</div>
</div>
The next part of your problem is recognizing the current URL. You don't need the onclick listener anymore, but a code that runs once on every page. You can use windows.location
for that. For example:
<a href="acasa.html" id="acasa">ACASA</a>
if(window.location.href.indexOf('acasa.html') != -1)
document.getElementById('acasa').setAttribute('id', 'active');
I've added the id acasa
just for easier selecting, but you can select it any way you like.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments