jQuery Eigenschaft einer css klasse ändern

CrazyPlaya · 15.01.2012

Hallo zusammen,

bin noch ziemlich neu im Umgang mit jQuery und finde es einfach nicht. Meine das schon mal gelesen zu haben.
Wie kann ich eine Eigenschaft einer CSS - Klasse ändern?
habe z.B. die Klasse

.active
{
background: url(...);
}

jetzt möchte ich bei Klick auf einen Link das Bild in der Klasse ändern.

Ist dies möglich?

LG
CP

Kerstin77 · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Hi,

versuch es mal so:

HTML:

jQuery('div').addClass('newClass');

Grüße,
Kerstin

CrazyPlaya · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Hi Kerstin,

aber die Klasse ist ja schon vorhanden.
Würde diese dann überschrieben?

Achso gerade noch mal geschaut. Das mach ich ja bereits.
var spanchange = $("#"+idofclicked+"span");
spanchange.addClass("active");
Aber ich möchte ja ein neues Bild als background laden. Sprich den in active im background: url() Attribut gesetzten Pfad abändern.

Kerstin77 · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Hi,

normalerweise überschreibt der neue Wert für das Hintergrundbild den alten. Kannst aber auch mit removeClass zunächst die alte entfernen.

Grüße,
Kerstin

CrazyPlaya · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Grins, das mache ich bereits auch schon so, da es für eine Navigation ist. Und active nur für den aktuell gewählten Link eingetragen sein soll. Nur das mit der Grafik das will nicht so ganz es wird immer die angezeigt die fest in der Klasse ist.

Aber wie gesagt es geht ja darum in der Active Klasse das Bild auszutauschen. Sprich den Pfad in Klasse .active von url(x/y) in url(x/z) ändern.

Kerstin77 · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Ist denn vorher schon ein Hintergrundbild gesetzt? Habe gerade diesen Artikel gefunden:
http://jquery-howto.blogspot.com/2009/08/can-set-change-css-background-image.html

cebito · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

PHP:

$('.active').css('Eigenschaft','Wert');

http://api.jquery.com/css/

CrazyPlaya · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

@ Kerstin: Ja es wird beim laden der Seite ein Bild im ersten Navifeld gesetzt.

wenn ich das so mache landet dies im style attribut direkt in mein span element aber nicht in der Klasse active.
$('active'.css("background", "url(x/z)"));
Die Klasse active wird dann auch nicht gesetzt.
Nehme ich die Zeile wieder raus wird die active Klasse gesetzt.
Dieses wird dann natürlich beim nächsten Wechsel nicht gelöscht.

cebito · 15.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Das ganze gehört natürlich in ein Ereignis, wäre sehr Hilfreich, wenn du hier mal postest was du hast. Ich heg ja den starken Verdacht, das du hier grad die Kirche ums Dorf trägst. Mein Codeschnipsel tut genau das, was du willst. Mit deinen spärlichen Angaben ist mehr Hilfe nicht möglich.

mindraper · 16.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

hi.

bevor hier noch weiter im trüben gefischt wird:
kein javascript ( oder js-framework ) der welt wird dir da helfen können. die in einem stylesheet gesetzten css-rules sind für js "read-only". und dass mit

$( '#deinIdSelector' ).css( 'key', 'value' );

ein inline-style im element gesetzt wird, ist auch logisch, weil jquery neue css-deklarationen für elemente über das style-attribute des elementes selber setzt.

also entweder:
bei event x sagst du sowas:
$('#deinIdSelector').removeClass('active').addClass('eineAndereClass');

und definierst die neue klasse in deiner css-datei, oder du setzt halt inline-styles.

und ganz davon abgesehen: hast du einen logischen grund, eine navigation ( ich gehe mal schwer davon aus, dass es sich hier um eine flyout-navi o.ä. handelt ) nicht nur auf html + css aufzubauen?

gruß

CrazyPlaya · 16.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Morgen,

es handelt sich hier um eine ganz normale horizontale Navigationsleiste, nur das für jedes Element z.B. schon mal eine eigene Hintergrundgrafik existiert die ins li tag eingebettet ist.
Darüber wir ein a Element platziert, welches in der Schriftfarbe das farbliche gegenüber gesetzt bekomt. Sprich grünes Hintergrundbild gelbe Schrift, gelbes Hintergrundbild grüne Schrift.
Zusätzlich soll für das aktivierte Navi Element eine extra Grafik gesetzt sein die ebenfalls in der Schriftfarbe sitzt. Kann man dies
rein über html und css regeln?

Myhar · 16.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Poste mal einen Screenshot von dem, was du dir vorstellst.
Aber ja, grundsätzlich kann man verschiedene Styles nur mit CSS und HTML lösen.

HTML:

<ul>
<li class="redactive"><a>blabla</a></li>
<li class="blue"><a>blabla</a></li>
<li class="yellow"><a>blabla</a></li>
</ul>

li.redactive{color:red;font-weight:bold}
li.blue{color:blue}
li.yellow{color:yellow}

CrazyPlaya · 16.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Ok, so wüsste ich es ja auch, einfach für jedes auf active gesetzte Feld eine eigene CSS Klasse erstellen und dementsprechend die Grafiken darin implementieren.

Wollte das nur etwas dynamischer versuchen um Klassen zu sparen

Dann werde ich wohl nicht ohne die Klassen auskommen. Danke für eure Hilfe.

Und entschuldigt das ich gerade nichts zeigen kann, aber bin auf Arbeit und komm an die Sachen nicht ran, da sie bei mir zuhause lokal liegen.

mindraper · 16.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

hi nochmal.

du brauchst doch gar nicht x klassen zu definieren. es langt, wenn du in deinem css mit pseudo-selektoren arbeitest.

also so:

.active {
background-color: #ff0000;
color: #ffffff;
}

.active:hover {
background-color: #0000ff;
}

nette site mit ( echt ) vielen versch. flyoutmenüs: www.cssplay.co.uk

gruß

Myhar · 17.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Das ist der hover Effekt, den du beschreibst. Ich hoffe doch, dass dem Threadersteller klar ist, wie er den anzuwenden hat. Zumindest habe ich ihn so verstanden, dass er einfach für jeden Menüpunkt eine andere Farbe sucht (Hover ist da was ganz anderes)
Und man spart keine Klassen ein, indem man JS verwendet. Es gibt immer noch Leute, welche eine Webseite ohne JS ansteuern (mich zB). Die würden dann nichts von deinem Menü sehen. Oder nur sehr wenig, je nachdem, wie gut es umgesetzt wurde.

mindraper · 17.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

hi.

ja, ist mir schon klar, dass ich den pseudo-selktor :hover meine. sagt ja schon der name selbst aus, oder?

grund für meine wahl war, dass die meisten js verwenden, weil flyout-menüs bei vielen "tutorials" immer noch via mouseover-event in js umgesetzt werden, was ja wohl vollkommener schwachsinn ist. deshalb auch noch der link zu cssplay

gruß

EDIT: richtiger wäre natürlich der begriff "pseudo-klasse", weil :hover oder :focus ja nunmal keine selektoren sind. sry. my fault.

Myhar · 18.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Ich weiß schon, dass du die :hover Pseudeklasse meinst. Auch, dass es besser ist, :hover anstatt einer JS Lösung zu verwenden.
Ich meinte lediglich, dass ich nicht glaube, dass der Threadersteller eine Lösung für :hover gesucht hat sondern für verschiedene Links einer Navigation im Normalzustand. Aber so lange sich der TE nicht zu Wort meldet, wissen wir es nicht.

CrazyPlaya · 18.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

@Myhar: Asche auf mein Haupt. Hatte etwas wenig Zeit die letzten Tage mich zurückzumelden.
Aber du hast recht eine Lösung für hover war nicht gesucht.

Also ich habe es jetzt erst mal gelöst.
Die Navigation sieht ungefähr so aus.

HTML:

<style>
.hintergrund_1
{
       background: url('bg_image_1.png') no-repeat;
}

.hintergrund_2
{
       background: url('bg_image_2.png') no-repeat;
}

.hintergrund_3
{
       background: url('bg_image_3.png') no-repeat;
}
</style>

<ul id=navi>
<li class="hintergrund_1"><span class="active_start"><a href="#">Start</a></span></li>
<li class="hintergrund_2"><span><a href="#">Start</a></span></li>
<li class="hintergrund_3"><span><a href="#">Start</a></span></li>
</ul>

Am Ende habe ich hier einfach eine horizontale Navigation mit den Hintergründen der hintergrund - klassen auf denen ein a Tag liegt. Klicke ich nun auf eines der Navigations Elemente soll auf dem aktiven Navigationselement eine weitere kleine Grafik angezeigt werden die anzeigt das dieses Element gerade aktiv ist. Ebenso soll der Link deaktivert sein.
Hoffe ist einigermaßen verständlich.

Gruß
CP

Myhar · 18.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Verwendest du die Spans im li um einen zweiten Teil einer skalierbaren Hintergrundgrafik anzuzeigen? (sliding door) ?
Wenn nein, wozu hast du die Spans? Nur um deinen HTML Code aufzublähen? Dann raus damit.

Du kannst, wenn du keinen Link haben willst, statt dem a Tag einen span ausgeben, damit du zwischen aktivem "Link" und wirklichem Link unterscheiden kannst.

HTML:

#navi .hintergrund_1 span {background:url(ich-bin-aktiv.gif) no-repeat left top}
#navi .hintergrund_2 span {background:url(ich-bin-anders-als-punkt-1-aktiv.gif) no-repeat left top}
#navi .hintergrund_1 {background:(grafik1.png) no-repeat left top}

<ul id=navi>
<li class="hintergrund_1"><span>Start</span></li>
<li class="hintergrund_2"><a href="#">Produkte</a></li>
<li class="hintergrund_3"><a href="#">Wissenswertes</a></li>
</ul>

Bei dem Aufbau weißt du -> Gibt es ein span nach dem li, so ist es kein richtiger Link und du zeigst deine aktive Grafik an. Gibt es kein span, dann wird auch die aktive Grafik nicht angezeigt.

LG

CrazyPlaya · 18.01.2012

AW: jQuery Eigenschaft einer css klasse ändern

Ja genau dafür werden die Spans benutzt.
Deine Lösung sieht mal besser aus als meine

Nur die Frage jetzt, ohne JS wird bei einem Klick darauf nicht der a Tag gegen einen span Tag getauscht?