CSS Klasse eines div Layers ändern; wie?

**daniel987** · 22-05-2005, 19:05

Ist es mit Javaskript möglich bei einem div, welches so aussieht:

<div class="style_1">Irgendeine Text</div>

mit Javaskript durch einmaliges clicken in:

<div class="style_2">Irgendeine Text</div>

gewandelt wird und durch nochmaliges klicken wird zurrück zu:

<div class="style_1">Irgendeine Text</div>

gemacht wird? Wenn ja wie?

**BlackHawk** · 22-05-2005, 19:10

function switch(obj) {
if (obj.className == "style_1") obj.className = "style_2";
else obj.className = "style_1";
}

<div class="style_1" onclick="switch(this);">Irgendeine Text</div>

danke an Pit - ich änder das hier mal

pit-r · 22-05-2005, 19:31

Moin!

Um die class mit js neu zuzuweisen reicht es nicht, obj.class='blah' zu "sagen" - es muß heißen obj.className='blah'. Gleiches gilt bei Abfragen...

Ahoi - Pit

**daniel987** · 22-05-2005, 21:02

Ich bekomme es bei mir noch nicht so ganz eingebaut, ich möchte das die Klasse bei einem Klick auf einen Link gewechselt wird, wie mache ich das? Ich gebe mal ein konkretes Beispiel:
Hier meine Funktion:

function switch(obj) {
if (obj.className == "menu_1") {
obj.className = "menu_2";
}
else {
obj.className = "menu_1";
}

hier mein html File:

HTML-Code:

<div class="menu_1" id="div_1" onclick="switch(this);">
	<a href="#" onclick="switch(this);">Categories</a>
</div>
<div class="menu_1" id="div_2" onclick="switch(this);">
	<a href="#" onclick="switch(this);">Categories</a>
</div>

Es ist mir natürlich klar, das ich dann bei dem Link nicht mehr this nehmen kann, aber was dann?

pit-r · 22-05-2005, 21:13

Hi!

So funzt es:

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Beispiel</title>

<script type="text/javascript">

<!--

function switchClass(obj) {

if (obj.className == "menu_1") {

obj.className = "menu_2";

}

else {

obj.className = "menu_1";

}

}

//-->

</script>

</head>

<body>

<div class="menu_1" id="div_1">

<a href="#" onclick="switchClass(document.getElementById('div_1'));">Categories</a></div>

<div class="menu_1" id="div_2">

<a href="#" onclick="switchClass(document.getElementById('div_2'));">Categories</a></div>

</body>

</html>