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

JavaScript
1

Hi,

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 />
		</div>

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.

2

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?

3

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]

4

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”?

5

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.

6

but something like this is probably what you need

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
.normal {
 color: green
}
 
.active {
 color: red
}
 
</style>
<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
    setDefClass();
    //set the onclick event handler
    for(i=0; i < lnksO.length; i++) {
        lnksO[i].onclick = function () {
            setDefClass();
            this.className = 'active';
        }
    }
}
</script>
 
</head>
<body>
 
<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 />
</div>
 
</body>
</html>
7

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.

Update:

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