onClick div Inhalt austauschen mit CSS?

salt&indigo · #1 (**permalink**) 17.09.2012, 12:37

Hallo, ich möchte mit einer Schaltfläche "button 1" den Text von 3 divs austauschen.

Ausgangstexte:

<div id="eins" >eins
</div>
<div id="zwei" >zwei
</div>
<div id="drei" >drei
</div>

Ergebnis (Nachdem auf "button 1" geklickt wurde):

<div id="eins" >one
</div>
<div id="zwei" >two
</div>
<div id="drei" >three
</div>

Was für einen Code schreibe ich in den Button?

<a href="button1">englisch
*****text von "eins","zwei","drei" austauschen******
</div></a>

Wichtig ist, dass ich das nicht mit Javascript machen kann, da es für ein Template ist, wo Javascipt nicht funktioniert. Ich muss es also mit css hinbgekommen.

Weiß jemand wie das geht?
Freue mich über Hilfe!

heiko_rs · #2 (**permalink**) 17.09.2012, 13:50

Das ohne JS zu lösen, war schon immer so eine Sache - nie wirklich praxisgerecht, da immer einige Browser nicht mitgespielt haben, z.B. bei Lösungen mit :focus und Nachfahren- oder Nachbarselektor. Spätere Lösungen setzen auf label, Radiobuttons und die :checked-Pseudoklasse.

Letzteres wird eingesetzt bei diesen beiden Varianten, die zumindest in allen aktuellen Browsern laufen (allerdings ist ihr Markup nicht gerade semantisch):

Functional CSS Tabs Revisited | CSS-Tricks
Stu Nicholls | CSSplay | CSS3 Grid Accordian using Radio buttons

salt&indigo · #3 (**permalink**) 17.09.2012, 14:24

Habe jetzt so eine Variante probiert. Leider bleibt der Text nicht stehen, wenn ich draufklicke, sondern verschwindet danach. Außerdem weiß ich nicht, wie ich den einen Text ausblende, sobald der andere aktiv ist:

<style type="text/css">

#cssonclickswitch {
position:relative;
width: 150px;
margin:20px auto 100px;
}

#cssonclickswitch a {
display: inline;
width:50px;
color: #000;
text-decoration:none;
text-align:center;
}

#cssonclickswitch a span {
display: none;
}
#cssonclickswitch a:active span,
#cssonclickswitch a:focus span {
display: inline;
position: absolute;
top: 0;
left: 170px;
width: 50px;
color:red;
background:#fff;
}

</style>

<body>

<h1>CSS onclick</h1>
<ul id="cssonclickswitch" >
<a href="#n">deutsch<span><div id="eins">eins</div>

</div>
<div id="zwei">zwei</div>

</div>
<div id="drei">drei</div>

</div>

</span></a>
<a href="#n">englisch<span><div id="one">one</div>

</div>
<div id="two">two</div>

</div>
<div id="three">three</div>

</div>

</span></a>
</ul>

</body>

salt&indigo · #4 (**permalink**) 17.09.2012, 14:45

@heiko, danke für die links, ich probiere es mal damit aus

salt&indigo · #5 (**permalink**) 17.09.2012, 18:53

Zitat:

Zitat von heiko_rs

Functional CSS Tabs Revisited | CSS-Tricks

Mit dem Link hat es geklappt! Vielen Dank

heiko_rs · #6 (**permalink**) 17.09.2012, 18:57

Beachte halt nur den relativ eingeschränkten Browser-Support (steht weiter unten auf der Seite).

salt&indigo · #7 (**permalink**) 18.09.2012, 16:17

Ich hab dazu noch eine Frage, hoffentlich nicht zu kompliziert. Ich habe jetzt den Code wie in deinem Link eingebaut. Also in Tap 1 habe ich die Seite auf deutsch und in Tap 2 auf englisch. Es handelt sich um ein Template, was Texte in eine Variable reinläd. Ich habe dafür leider nur eine Variable zur Verfügung und die heißt <-Beschreibung->. Diese Variable schreibe ich einfach in ein div und auf der Seite erscheint der Text. Daher muss ich den deutschen Text und den englischen Text in die Variable <-Beschreibung-> untereinander einfügen.

So würde ich die Variable verwenden:

Beschreibung:
<-Beschreibung->

Ich wollte es ganz schlau lösen, indem ich den Inhalt der Variable zum Beispiel so schreibe:

<div id="beschrdeutsch">deutsche Beschreibung
</div>
<div id="beschrenglisch">englische Beschreibung
</div>

Das würde dann erstmal im Resultat so aussehen:

Beschreibung:
deutsche Beschreibung
englische Beschreibung

Wenn man auf "deutsch" klickt wollte ich im css code dann folgendes schreiben:

#beschrenglisch {

display:none;

}

damit man nur den deutschen Text sieht. Und wenn man auf "englisch" drückt das gleiche natürlich andersrum.

Bei der Variante von deinem Link gibt es aber für beide Tabs nur einen css Code, also geht das gar nicht. Gibt es eine Möglichkeit das zu lösen mit css?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS - CMS - lange Menus Balken/BG oben?	shinobi	CSS	3	13.10.2011 21:12
Header entfernen	tripple	CSS	17	15.06.2010 15:41
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
Internet Explorer stellt Layout falsch dar	phpfuchs	CSS	2	14.09.2006 09:16
Ein Bild "rechts unten" positionieren	bueno	CSS	5	04.04.2006 14:47