Reputation: 45
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):
<ul onclick="JavaScript:changeCurrent();>
where I need to have the event?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
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)
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
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
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