CODEWITHSUNDEEP
javascripthtmlcss
Kapoios
Kapoios

Reputation: 712

Change the selected list element in a navigation list using plain JavaScript

I have trouble in writing a script to change the appearance of the clicked tab in a webpage navigation list. In other words, I want to make the clicked tab appear as the selected (in code). I tried to do that by changing its id to selected_link and restoring the id of the previously selected tab.

EDIT: Following jamespaned's suggestion, I replaced element IDs with classes.

My tabs appear like in this picture:

enter image description here

So, when I click to "bio", I want it to appear as "home" and "home" to appear as the other tabs.

As I'm a newbie in JavaScript coding, I didn't managed to accomplish that. Here is what I've done:

The HTML code for the (inline) navigation list:

<nav>
<ul id="navlist">
    <li class="selected"> <a href="index.html" tabindex="1" id="tab" class="selected_link" onClick="changeSelected(this.id)">home</a> </li>
    <li class=""> <a href="bio.html" tabindex="2" id="tab2" class="" onClick="changeSelected(this.id)">bio</a> </li>
    <li class=""> <a href="pubs.html" tabindex="3" id="tab3" class="" onClick="changeSelected(this.id)">publications</a> </li>
    <li class=""> <a href="software.html" tabindex="4" id="tab4" class="" onClick="changeSelected(this.id)">software</a> </li>
    <li class=""> <a href="contact.html" tabindex="5" id="tab5" class="" onClick="changeSelected(this.id)">contact</a> </li>
</ul>
</nav>

its respective CSS:

nav ul {
list-style:none;
padding:0;
margin:0;
}
nav li {
background-color:black;
display:inline;
border:solid;
border-width:1px 1px 0 1px;
margin:0 5px 0 0;
} 
nav li a {
color:white;
padding:0 10px;
}
.selected {
background-color:white;
padding-bottom: 1px; 
} 
.selected_link{
color:blue;
}

and the JavaScript which I've designed to accomplish this task, but it didn't worked:

function changeSelected(clickedId)
{
    var ulist = document.getElementById("navlist");
    var elems = ulist.getElementsByTagName("class");
    for (var i = 0; i < elems.length - 1; i++)
    {
        var sel = elems[i].getAttribute("class");
        if (sel == selected)
        {
            var selli = elems[i];
            break;
        }
    }
    selli.setAttribute("class", "");
    selli.lastElementChild.setAttribute("class", "");

    var clicked = document.getElementById(clickedId);
    clicked.setAttribute("class", "selected_link");
    clicked.parentNode.setAttribute("class", "selected");
}

How could I do that using only plain JavaScript?

Upvotes: 0

Views: 186

Answers (1)

jamespaden
jamespaden

Reputation: 468

This Javascript will do what you want:

function changeSelected(clickedId)
{
    var selli = document.getElementById("selected");
    var sela = document.getElementById("selected_link");
    sela.setAttribute("id", "");
    selli.setAttribute("id", "");

    var clicked = document.getElementById(clickedId);
    clicked.setAttribute("id", "selected_link");
    clicked.parentNode.setAttribute("id", "selected");
}

That said, here are some ideas that might help your Javascript education:

  1. You are using Javascript to set your IDs, but the Javascript won't work on the next page after you've clicked on one of the links. You'll probably need to do some backend (PHP/Ruby, etc) coding to get your styles to change.
  2. IDs are normally used to refer to a unique element on the page that doesn't change, such as a #header or #sidebar_banner. You might want to use a class instead, such as ".selected_link".
  3. You don't need both #selected_link and #selected. You could do ".selected" and ".selected a" to change the CSS so you only need to change one element.

Hope that helps!

Upvotes: 1

Related Questions