Antworten auf deine Fragen:
Neues Thema erstellen

jQuery Eigenschaft einer css klasse ändern

CrazyPlaya

Noch nicht viel geschrieben

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
 

CrazyPlaya

Noch nicht viel geschrieben

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.
 
Zuletzt bearbeitet:

Kerstin77

Flashfan

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

Noch nicht viel geschrieben

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.
 
Zuletzt bearbeitet:

CrazyPlaya

Noch nicht viel geschrieben

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

undefined

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

me[code].Java(Script)

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

Noch nicht viel geschrieben

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

Hat es drauf

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

Noch nicht viel geschrieben

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

me[code].Java(Script)

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

Hat es drauf

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

me[code].Java(Script)

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

Hat es drauf

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

Noch nicht viel geschrieben

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

Hat es drauf

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
 
Zuletzt bearbeitet:

CrazyPlaya

Noch nicht viel geschrieben

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?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben