ToggleClass of two (or more) objects at the same time


Firstly “hello to everybody”.

Now my problem.

I want to change class of couple objects with one click. I thought I can do it with toggleClass, but I have no idea where to start.

My code:

<div class="menu" id="menu_area">
			<a href="page1.html" class="active" id="1">page1</a><br /><br />
			<a href="page2.html" class="inactive" id="2">page2</a><br /><br />
			<a href="page3.html" class="inactive" id="3">page3</a><br /><br />
			<a href="page4.html" class="inactive" id="4">page4</a><br /><br />

So at the beginning the first link has class=active, when someone will click the 2nd link I want to change class of that link to “active” and rest to “inactive”. And of course if someone will click on “active” link, class should stay the same (class="active). I hope I’ve clearly described my problem.

Thanks in advance.

are you changing the class name to only change the way the link looks when it is clicked or to actualy disable or enable the link?

The best technique to achieve this is to perform two separate steps:

[list=1][]Set all of those links to inactive
]Add the active class to the one appropriate link[/list]

I’m trying to change the way the link looks by changing the class, but clicking the link does not load new page, it loads new content to a div form a static page.

Ok, so what you are saying is : make a active link by adding another class (active link made from two classes), class=“class1 class2”?

but as soon as a link is clicked, the browser will go to a new page as specified in the link’s href, so I don’t see why you need to change how the link looks since you’ll be taken to another page.

but something like this is probably what you need

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<style type="text/css">
.normal {
 color: green
.active {
 color: red
<script  type="text/javascript">
function setDefClass() {
 for(i=0; i < lnksO.length; i++) {
        lnksO[i].className = 'normal';  
window.onload=function() {
    lnksO = document.getElementById("menu_area").getElementsByTagName("a");
    //set the default class to these links
    //set the onclick event handler
    for(i=0; i < lnksO.length; i++) {
        lnksO[i].onclick = function () {
            this.className = 'active';
<div class="menu" id="menu_area">
   <a href="#" class="active" id="1">page1</a><br /><br />
   <a href="#" class="inactive" id="2">page2</a><br /><br />
   <a href="#" class="inactive" id="3">page3</a><br /><br />
   <a href="#" class="inactive" id="4">page4</a><br /><br />

That’s the problem… clicking a link will NOT take you to a new page, cause clicking will launch javascript which will change the content of a div and then return false, so the browser will not go to a new page.

Thx for a script, will check it later.


And the winner is: Kalon :slight_smile: Thank you very much, this is what I was looking for.