How to change the style of a NAV element when it's selected with JavaScript only?

bookw0rm

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.

Shomz

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.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Change the CSS style of selected element using CSS only

From Dev

How to change only selected element css

From Dev

How to change the border of an element when selected?

From Dev

how can change other selected element style using jquery

From Dev

How to change text to what it's selected in Javascript?

From Dev

How to change CSS over selected element only using $(this)

From Dev

How to change the style of nav-pills and navbar?

From Dev

Vanilla Javascript. Change style of element when scrolling.

From Dev

Callback for style change of element in Javascript

From Dev

Why won't my nav element go to the center or change style?

From Dev

How do I change the nav drawer text style when using the Android Project Template?

From Dev

How can I style a nav bar link as selected using CSS?

From Dev

How to change sortable element's style while dragging?

From Dev

How to change font color inside nav element?

From Dev

How to change font color inside nav element?

From Dev

Change style of an element when focus is another element

From Dev

Change style of an element when focus is another element

From Dev

How to have a selected value in combobox when there's only one

From Dev

How to change style of Selected ListView Item in UWP

From Dev

How to change style of Selected ListView Item in UWP

From Dev

How to change a div's outline color when selected?

From Dev

Style element only when it contains clipped text

From Dev

Style element only when it contains clipped text

From Dev

how to change other element css when selected element has new class

From Dev

How can I change the HTML of an element when different options are selected in a separate <select> element?

From Dev

Javascript change multiple element style on click

From Dev

JavaScript: change style of element specified by class

From Dev

Change Element style with window height with JavaScript

From Dev

JavaScript: change style of element specified by class

Related Related

  1. 1

    Change the CSS style of selected element using CSS only

  2. 2

    How to change only selected element css

  3. 3

    How to change the border of an element when selected?

  4. 4

    how can change other selected element style using jquery

  5. 5

    How to change text to what it's selected in Javascript?

  6. 6

    How to change CSS over selected element only using $(this)

  7. 7

    How to change the style of nav-pills and navbar?

  8. 8

    Vanilla Javascript. Change style of element when scrolling.

  9. 9

    Callback for style change of element in Javascript

  10. 10

    Why won't my nav element go to the center or change style?

  11. 11

    How do I change the nav drawer text style when using the Android Project Template?

  12. 12

    How can I style a nav bar link as selected using CSS?

  13. 13

    How to change sortable element's style while dragging?

  14. 14

    How to change font color inside nav element?

  15. 15

    How to change font color inside nav element?

  16. 16

    Change style of an element when focus is another element

  17. 17

    Change style of an element when focus is another element

  18. 18

    How to have a selected value in combobox when there's only one

  19. 19

    How to change style of Selected ListView Item in UWP

  20. 20

    How to change style of Selected ListView Item in UWP

  21. 21

    How to change a div's outline color when selected?

  22. 22

    Style element only when it contains clipped text

  23. 23

    Style element only when it contains clipped text

  24. 24

    how to change other element css when selected element has new class

  25. 25

    How can I change the HTML of an element when different options are selected in a separate <select> element?

  26. 26

    Javascript change multiple element style on click

  27. 27

    JavaScript: change style of element specified by class

  28. 28

    Change Element style with window height with JavaScript

  29. 29

    JavaScript: change style of element specified by class

HotTag

Archive