CODEWITHSUNDEEP
javascriptcsshtml-lists
Benjamin
Benjamin

Reputation: 45

Use JavaScript to change the class of an <li>

I have the following code:

<div id="nav">
  <ul>
    <li id="tabOne" class="first current"><a href="./CS1.html" target="SheetView">Page One</a></li>
    <li id="tabTwo"><a href="./CS2.html" target="SheetView">Page Two</a></li>
    <li id="tabThree"><a href="./CS3.html" target="SheetView">Page Three</li>
    <li id="tabFour"><a href="./CS4.html" target="SheetView">Page Four</a></li>
    <li id="tabFive"><a href="./CS5.html" target="SheetView">Page Five</a></li>
    <li id="tabSix"><a href="./CS6.html" target="SheetView">Page Six</a></li>
  </ul>

This loads the selected page into an iframe named "SheetView." What I need to do is use JavaScript to alter the class when an option that isn't the currently selected on is clicked. I should say that I have the current class already setup in my CSS. I just have no way to trigger it.

I thought adding an onlick event to the <UL> up there and calling onclick="Javascript:changeCurrent();" but there is the problem (four actually):

  1. Is <ul onclick="JavaScript:changeCurrent();> where I need to have the event?
  2. What is the resulting JavaScript to make the change happen?
  3. How can I cause the first option to be set as current by default?
  4. Is there a way to keep the currently selected option from being an active link?

I found a few different examples but I couldn't tailor them to work for me. Any help would be most appreciated.

Upvotes: 4

Views: 12434

Answers (3)

joequincy
joequincy

Reputation: 1395

Since you specified that you wanted a non-jQuery response, here's a function that will toggle appropriately:

function toggleNavSelected(el){
    var list = document.getElementById('nav').children[0];
    for(var i=0; i<list.children.length; i++){
        var cur = list.children[i];
        if(el==cur){
            cur.classList.add("current");
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
                return false;
            });
        } else {
            if(cur.classList.contains("current")){
                cur.classList.remove("current");
            }
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
            });
        }
    }
}

Either add an onclick handler to each LI (onclick="toggleNavSelected(this);") or execute the following after the menu has loaded:

var list = document.getElementById('nav').children[0];
for(var i=0; i<list.children.length; i++){
    var el = list.children[i];
    el.firstChild.onclick = (function(){
        toggleNavSelected(this.parentElement);
    });
}

Demo: http://jsfiddle.net/bWY7P/2/

(note: The JSFiddle script has a small difference; it adds a return false; to the onclick function so that you can play with it without the links actually following the HREF attribute. Do not use that line in your live code)

Explanation:

The function looks at each LI element within the #nav element.
If that element is the element passed to the function, then it adds the class .current.
Otherwise, it removes the class .current (if present).

The second part binds a function to the onclick event of each a element that calls the toggleNavSelected() function and passes its parent element (the li) as the argument.

Upvotes: 2

feeela
feeela

Reputation: 29942

First of all you should set the event handler from a separate script, not from an onclick attribute. You don't repeat your code that way and have anything in one place. The HTML is also much cleaner.

Using jQuery it would be as easy as:

var menuLinks = jQuery( '#nav a' );

menuLinks.on( 'click' function() {

    menuLinks.removeClass( 'active' );
    $( this ).addClass( 'active' );

} );

You could also do that in plain JS, but using some library keeps you out of the trouble of browser incompatibilities.

Upvotes: 0

ABC
ABC

Reputation: 718

1) if you want to change the currently selected class when you click an item, put the onclick into the li item 2) using jquery would be very easy here, all you have to do is import the jquery file with the <script> tag and you're ready! For example, you could do onclick="changeClass(this);" on the <li> tag and in a normal JavaScript file or in a script tag:

function changeClass(this){
 $('#nav li').attr("class","");
 $(this).attr("class","current");
}

Replace the 'current' with the class name you want to use

3) it should already be set as current

4) use the :visited CSS selector to change what colour followed links look like eg:

a:visited{
 color: #000000;
}

Upvotes: 0

Related Questions