✔ If Child hasClass

[Carrear]

Hi Leute,

ich habe eine navigation mit der Hintergrundfarbe #FFF. Bei Hover oder wenn ein li-Child Element die Klasse .active hat möchte ich, dass diese Hintergrundfarbe auf Transparent und durch ein Hintergrundbild ersetzt wird.

Leider scheitere ich schon bei den Selektoren (denke ich ). Was mache ich nur falsch.

if($('nav.main ul').children('li').hasClass('active')) { 
    $('nav.main').css('background-image','url(./site/img/bg_transparent.png)');
    $('nav.main').css('background-color','transparent');
});

Die HTML Struktur sieht so aus:

<nav class="main">
 	<ul>
 		<li class="active"><a href="/Portrait/">Portrait</a></li>
 		<li><a href="/Aus-und-Weiterbildung/">Aus- und Weiterbildung</a></li>
 		<li><a href="/Veranstaltungen/">Veranstaltungen</a></li>
 		<li><a href="/Presse/">Presse</a></li>
 		<li class="alignfix"></li>
 	</ul>
</nav>

 

[Hansii1234]

Hi!
Von was willst du denn die Hintergrundfarbe ändern?
Von der ganzen Navigation? Oder vom einzelnen Link - also li ?

Gruß!

 

[Carrear]

Ich möchte die Farbe der ganzen Navigation ändern. Aber irgendwie habe ich das Gefühl es liegt an der Kondition.

 

[Hansii1234]

Dann hinterleg doch in einer css-datei oder driekt im Header deiner HTML diesen code:

.active {
        background-image:url(./site/img/bg_transparent.png);
	background-color:transparent;
}

und mit Javascript schreibst du:

$("nav.main").hover(function(){
	$(this).addClass("active");
},function(){
	$(this).removeClass("active");
});

Das sollte langen.

Gruß!

 

[Carrear]

Nene, ich muss das anders aufbauen. Die Navigationsbar soll wenn weder Hoverstatus noch ein li child mit der Klasse active vorhanden ist weißen Hintergrund haben. Bei Hover soll sie Transparent weiß Hinterlegt sein (mit dem Bild) und der Hover li eben Opak weiß. Und der jeweilige li mit der Klasse active eben auch Opak weiß. CSS dazu poste ich im Anhang. Ich will jetzt eben per JS bzw mit JQuery erreichen, dass immer dann, wenn in der nav.main ul ein li mit der klasse active ist die hintergrundfabr von der nav auf transparent und das Hintergrundbild ausgewählt wird.

nav>ul {
	list-style: none;
}
nav.main {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 28px;
	line-height: 28px;
	background-color: #FFF;
	text-align: justify;
}
nav.main:hover {
	background-color: transparent;
	background-image: url(../img/bg_transparent.png);
}
nav.main li {
	display: inline-block;
}
nav.main li a {
	margin: 0 15px;
}
nav.main li.active {
	background: #FFF;
	color: #ac4e1a;
}

 

[Hansii1234]

Und wie kommt die Klasse .active in ein solches li?
Wenn die Seite neu geladen ist?
Oder wird in der Navi geklickt und mit Javascript das .active dann reingeschrieben?

 

[Carrear]

Das passiert beim Neuladen.

 

[Hansii1234]

Dann stimmt dein Code, nur dass du evtl. darauf achten musst,
dass erst ausführen zu lassen, wenn die Seite komplett geladen ist.

jQuery(document).ready(function() {
	if ($('nav.main ul').children('li').hasClass('active')) {
		$('nav.main').css('background-image', 'url(./site/img/bg_transparent.png)');
		$('nav.main').css('background-color', 'transparent');
	}
});

Achja... du hattest beim Scließen der If-Abfrage eine Klammer ) zuviel.
Das könnte auch der Fehler gewesen sein...

 

[Carrear]

Komisch, ich bin der festen Überzeugung, dass ich es in meinen vielen Verbesserungsversuchen schon so hatte aber jetzt funktioniert es ^^ danke.

 

[Carrear]

Hier habe ich noch ein Selektorenproblem der span der zum schließen des durch a.button geöffneten divs da ist, ist in a verschachtelt. D.h. natürlich, dass jeder klick auf span auch einen klick auf a auslöst. ich möchte aber, dass wenn ich a.button span klicke nur der zweite teil ausgelöst wird und sonst eben die erste

       	$("div.topbar a.button").click(function () {
			var clicked = $(this);
			if($(clicked).hasClass('active')) {

			} else {
				$("div.topbar a.button.active").next().slideToggle('slow');
				$("div.topbar a.button.active").removeClass('active');
				$(clicked).addClass('active');
				$(clicked).next('article').slideToggle('slow');
			}
		});

       	$("div.topbar a.button span").click(function () {
		$(this).parent().removeClass('active');
		$("div.topbar a.button.active").next().slideToggle('slow');
	});