| Autor |
Nachricht |
bsights
Threadersteller
Dabei seit: 21.09.2005
Ort: Hamburg
Alter: -
Geschlecht: 
|
Verfasst So 31.05.2009 19:29
Titel toggle display in HTML-Link? |
  |
|
Frohe Pfingsten! 
Mal angenommen, ich habe auf einer Seite eine Beschreibung plaziert, deren Inhalt zum Teil per togglefunktion aus- und eingeklappt werden kann z.B.
| Code: |
<a name="2" id="2"></a>
Infotext
<script language="javascript">
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>
<a href="javascript:toggle('box-2')">Weitere Informationen auf/einklappen</a>
</div>
<div class="beispiel" id="box-2" style=" display: none;">
<ul>
<li>Werder ist verdienter Pokalsieger</li>
<li>Wolfsburg verdienter Meister</li>
<li>Bayern steigt nächste Saison ab</li>
</ul>
</div>
Hier käme jetzt noch weiterer Text, der von vornherein erscheint, also nicht versteckt ist. |
Ich nehme weiter an, dass diese Beschreibung auf einer normalen HTML-Seite plaziert ist, zusätzlich verankert mit #2, z.B.
| Code: | | http://www.testseite.de/beschreibung#2 |
Ruft man die Seite innerhalb der Website normal auf, ist zunächst ein Teil der Beschreibung - wie gewollt - versteckt, und man kann ich nun auf- oder einklappen.
Nun möchte ich auf einer anderen Seite einen Link zu dieser Beschreibung setzen, der sie aufruft, allerdings mit bereits geöffneten versteckten Inhalt, ohne großartig nochmal zu 'toggeln'. Geht das? Und wenn ja, wie erweitere ich den Link? Mit onclick?
| Code: | | <a href="http://www.testseite.de/beschreibung#2" onclick="?">Link zur Beschreibung</a> |
Über Abhilfe wäre ich sehr dankbar.
Viele Grüße
Alex
|
|
| |
   |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst So 31.05.2009 23:52
Titel
|
|
|
Ist zwar häßlich und ungetestet, sollte aber funktionieren (genau so wie du es beschrieben hast).
Einfach das folgende Script in deine Seite einbauen, die du mit dem Anchorlink aufrufst (also nix mit onclick oder so).
Wenn du das ganze vernünftig machen willst, solltest du die Erklärungstexte a) beim Laden des Dokumentes per Javascript ausblenden (Stichwort unobstrusive javascript), damit sie für Leute die JS deaktiviert haben sichtbar sind und b) zum "Parsen" der URL eine serverseitige Scriptsprache verwenden (und deutlich mehr Überprüfung einbauen als ich das in meinem flugs zusammengeschustertem Script habe).
| Code: | window.onload = function() {
URLString = document.location.href;
URLArray = URLString.split('#');
if(URLArray.length>1) {
anchorValue = URLArray[1].substr(0,1);
document.getElementById('box-' + anchorValue).style.display = 'block';
}
} |
Zuletzt bearbeitet von sahnemuh am So 31.05.2009 23:58, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
bsights
Threadersteller
Dabei seit: 21.09.2005
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst So 14.06.2009 20:05
Titel
|
|
|
Hi Sahnemuh,
leider funktioniert das nicht so. Es sei denn, ich mache etwas falsch mit dem anchorvalue.
ch werde da wohl irgendwann doch auf PHP umsteigen müssen. 
Vielen Dank dennoch für Deine Hilfe!
LG
Alex
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 15.06.2009 09:49
Titel
|
|
|
Womöglich liegts an diesem Link
| Code: | | <a href="http://www.testseite.de/beschreibung#2" onclick="?">Link zur Beschreibung</a> |
Sollte in etwa so aussehen:
| Code: | | <a href="http://www.testseite.de/beschreibung/index.html#2">Link zur Beschreibung</a> |
Ansonsten hier ein anderes Beispiel:
toggle-dings
Damit die Boxen nicht erst onload versteckt werden,
kommt der init-Aufruf gleich nach der jeweiligen Box
(hat den vorteil bei längeren Ladezeiten, dass die Boxen
nicht erst angezeigt werden und dann erst versteckt).
Via php wärs aber trotzdem etwas unumständlicher  .
Grüße
zweitaccount
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[HTML][CSS] Margin und display: inline funzt ned
[html/css] 2 classes auf einen link ?
Hintergrundfarbe durch Link (HTML)
HTML: Ganze table als Link?
hilfe bei text/link // css // html
flash link zu html seite
|
|
Willkommen auf dem Portal für Mediengestalter
