Wechseln von CSS KLassen

[fredolin]

Hey Leute,

ich habe ein kleines Problem mit jQuery. Ich versuche mit einem Click eine aktive CSS Klasse durch eine andere CSS Klasse zu ersetzen.
Nun habe ich aber gemerkt, das beim ANklicken des Links eine ganz andere CSS Klasse geladen wird. Wenn ich mehrmal auf den Link klicke, dann wird nach einander alle Klassen angezeigt und dann wird irgentwann auch das ausgeführt was ich eigentlich erreichen will.
Momentan wenn ich auf den Link klicke zeigt mir mein alert-Fenster das so an, wie es im Bild zu sehen ist.

Der JS-Code für das imageclick ist foldender

$('.imageclick').click(function() {	
		wechselHeader($(this).attr('id'));
		if($('imageclick').click){
			clearInterval;	
		}
	});
	
	
	function wechselHeader(id) {
		$('#header').fadeOut(fadeOutTime, function() {
			$('#header').attr('class', 'headslider'+ id).fadeIn(fadeInTime);
		 });
	}

Kann das sein das dieser Code irgendwie im Speicher ist und so diese Klasse imgeclick mit geschliffen wird?

so hier mal mein JS-CODE für das ein und aus blenden der CSS-Klassen:

$('.slideclick').click(function() {
		changeClass($(this).attr('id'));
	});
	
	function changeClass(id) {
		$('.activ').fadeOut('slow', function() {
				//alert(id);
				//alert($('#'+id).attr('class'));
			$('#'+id).removeClass('inactiv');
			$('#'+id).addClass('activ').fadeIn('slow');									   
		 });
	}

Die Daten dazu rüfe ich über ein PHP Script aus eine Datenbank und befülle damit eine Liste.
Hier mein PHP -CODE

function leistNavi() {
		$dbhandle = opendb();
		$result = mysql_query("SELECT ID, headline FROM " . DBTEXT . " WHERE _show = 'y' AND ID BETWEEN 4 AND 11 ORDER BY ID ASC") or die("MySQL-ERROR-Typing => " . mysql_error());
		while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
			echo'<li id="'.$row['ID'].'" class="slideclick radius_recht12">'.$row['headline'].'</li>';
		}
	}

	function leistungen() {
		$dbhandle = opendb();
		$result=mysql_query("SELECT * FROM " . DBTEXT . " WHERE _show = 'y' AND ID BETWEEN 3 AND 11 ORDER BY ID ASC") or die("MySQL-ERROR-Typing => " . mysql_error());
		while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
			if($row['ID'] == '3') {
				echo '<li id="'.$row['ID'].'" class="activ"><h3 class="h3_headtext">'.$row['headline'].'</h3>'. $row['langtext'].'</li>';
			} else {
				echo '<li id="'.$row['ID'].'" class="inactiv"><h3 class="h3_headtext">'.$row['headline'].'</h3>'. $row['langtext'].'</li>';
			};
			
		}
		closedb($dbhandle);
	}

Aus dem Funktionsaufruf leistNav erstelle ich eine Navigationsleiste und bei Anklick der Links versuche ich mit der Klasse slideclick dann über die ID den Inhalt, der über die Funktion leistungen mit der KLasse inaktiv, ab zu ändern, so das der Inhalt angezeigt wird.

Beim Klick auf den nächsten Link soll der active Inhalt ausgeblendet werden und der geklickte Inhalt angezeigt werden.
Ich könntge mit vorstellen das man dies über die Funktion toggleClass hinbekommen kann oder?

Ja aber irgendwie scheiter ich daran und finde keine Lösung oder wie ich dieses Problem angehen kann. Hoffe sehr auf Eure Mithilfe und bedanke mich dafür.

Gruß Fredolin

 

[Quaese]

Hi,

kannst du ein komplettes, auf das Problem reduzierte, HTML-Dokument mit geparsten Daten erstellen und posten oder irgendwo online stellen?

Ich glaube kaum, dass hier jemand große Lust verspürt, sich das Ganze nachzustellen. Daran wird es wohl auch liegen, dass sich bisher niemand des Problems angenommen hat.

Ciao
Quaese

 

[tombe]

So ganz verstehe ich nicht was du schreibst, aber ich habe vielleicht trotzdem eine Idee.

Irgendein Element hat ja wohl die Klasse "activ" und alle anderen haben die Klasse "inactiv".

Wenn du jetzt bei dem Element welches du anklickst die Klasse änderst, bleibt aber bei allen anderen Elementen die Klasse gleich. Bedeutet wenn es bereits ein Element mit "activ" gibt, gibt es nach dem Klicken ein zweites usw.

Du musst bei allen Elementen die die Klassen "activ" bzw. "inactiv" haben könnten zuerst diese entfernen.

Dann kannst du mit toggleClass die Klasse des gewählten Elements wechseln.

 

[fredolin]

Hallo Quaese und tombe,

ich weiß das es schlecht beschrieben war mein Problem. Doch ich habe es hin bekommen.

Hier mein Code, wie ich es mache.

$('.slideclick').click(function() {
	changeClass($(this).attr('id'));
});
	
function changeClass(id) {
$('.activ').fadeOut('fast', function() {
	$('#'+id).addClass('activ').fadeIn('slow');								   
   });
}

Anschauen könnt IHr es euchunter http://www.webslay.de

aber nun habe ich ein Problem, denn im Footer benutgze ich auch diese Links und ich kann somit nicht auf die Seite springen.

Mein Code den ich mir über das auslesen einer DB mit php holesie so aus

function footer() {
		$dbhandle = opendb();
		$result = mysql_query("SELECT ID,bereich,headline FROM " . DBTEXT . " WHERE _show = 'y' AND ID BETWEEN 2 AND 12 ORDER BY ID") or die("MYSQL-ERROR-Typing => " . mysql_error());
		while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
			if(in_array('webspace', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>'; //<= aufruf der jQuery function
			} else if(in_array('webdesign', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else if(in_array('layout', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else if(in_array('website', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else if(in_array('suchmaschinen', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else if(in_array('seo', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else if(in_array('analytics', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else if(in_array('adwords', $row)) {
				echo '<li id="'.$row['ID'].'" class="slideclick">'.utf8_encode($row['headline']).'</li>';//<= aufruf der jQuery function
			} else {
				echo '<li><a href="?page='.$row['bereich'].'" alt="'.utf8_encode($row['headline']).'" name="'.$row['bereich'].'" title="'.utf8_encode($row['headline']).'">'.utf8_encode($row['headline']).'</a></li>';
			}
	}
		
		
closedb($dbhandle);
}

Bin ich nun aber auf einer anderen Seite 8z.B. Über uns), dann kann ich über diese Links, die im Footer Bereich sind nicht auf die Seite springen. Hab da nun keinen Lösungsansatz gefunden. Könnt Ihr mir da helfen?

Gruß Fredolin