Index eines Elements auslesen
0 
molily
0 0 
Matthias Apsel
0 0 Matthias Apsel
0 molily
0
Index eines Elements auslesen
Hallo Leute,
für ein größeres Projekt, habe ich mit folgendem Ziel:
Einzelne HTML-Seiten haben mehrere Untermenüs, wobei diese bei Klick bestimmte section-Elemente eingeblenden und alle anderen auf gleicher Ebene ausblenden sollten -gleichzeitig sollten die button-Elemente je nach Zustand eine bestimmte Hintergrundfarbe erhalten-
diesen Code geschrieben:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button{background-color:green;}
section{display:none;}
</style>
</head>
<body>
<button value="0">AAAAA</button>
<button value="1">BBBBB</button>
<section>
<p>AAAAA
</section>
<section>
<p>BBBBB
</section>
<script src="script.js"></script>
</body>
</html>
var button = document.getElementsByTagName("button");
var section = document.getElementsByTagName("section");
for(var i = 0; i < button.length; i++) {
button[i].onclick = function() {
var button_index = this.value;
if(this.style.backgroundColor.indexOf("red") > -1){
this.style.backgroundColor = "green";
section[button_index].style.display = "none";
}
else {
for(var i = 0; i < button.length; i++){
button[i].style.backgroundColor = "green";
section[i].style.display = "none";
}
this.style.backgroundColor = "red";
section[button_index].style.display = "block";
}
}
}
Nun würde ich es gern so haben, dass ich den index (bzw die Position) des gedrückten Button-Elements auslesen kann um es dann in der Variable button_index zu speichern und das gewünschte Section-Element aufzurufen.
Somit könnten im HTML die value-Attribute wieder raus, und das ganze würde vollautomatisch funktionieren.
Ich hatte mich gefreut als ich die JavaScript-Eigenschaft selectedIndex fand, jedoch ist die an das Options-Ellement gekoppelt.
Es muss doch eine möglichkeit geben, die Position meiner Button-Elemente auszulesen, bitte beachtet bei Vorschlägen, dass sich die Positionsangabe auf die Buttons beschränken muss, also eine Position im Kontext aller Elemente bringt mich nicht weiter.
Würde mich sehr freuen wenn jmd eine Lösung hat.
LG vsenol
-
Hallo,
Was du vorhast ist möglich, du kannst die Button-Liste mit einer for-Schleife durchlaufen und das Element mit dem angeklickten vergleichen. Wenn sie identisch sind, hast du den gesuchten Index gefunden und kannst die Schleife abbrechen. Das kannst du in eine allgemeine Funktion auslagern:
var indexOf = function(list, element) { // Konvertiere die Liste in einen echten Array var list = Array.prototype.slice.call(list); // Prüfe, ob der Browser schon die [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf@title=indexOf-Methode] unterstützt if (list.indexOf) { // Wenn ja, können wir einfach die aufrufen return array.[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf@title=indexOf](element); } else { // Andernfalls wenden wir oben beschriebene Logik an for (var i = 0, l = elements.length; i < l; i++) { if (element === elements[i]) { return i; } } } return -1; };Ich würde hier aber der Einfachheit halber a-Element und IDs verwenden:
<nav> <ul> <li><a href="#eins">Eins</a></li> <li><a href="#zwei">Eins</a></li> </ul> </nav> <section id="eins"></section> <section id="zwei"></section>Das JavaScript kann so einfach aElement.hash oder aElement.href auslesen, daraus die ID extrahieren und so das zugehörige Element finden.
Der Vorteil ist, dass dies auch ohne JavaScript funktioniert.
Die Formatierung der Links ist natürlich mit CSS beliebig änderbar.
Im Allgemeinen kannst du dir folgendes ansehen:
http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-Wie-man-Tabs-WIRKLICH-zugaenglich-macht.phpDenn was du da baust ähnelt sehr den bekannten Tab-Widgets. Dieser Artikel zeigt, wie man diese möglichst sauber und zugänglich umsetzt.
Grüße,
Mathias -
Hallo vsenol
Nun würde ich es gern so haben, dass ich den index (bzw die Position) des gedrückten
Button-Elements auslesen kann um es dann in der Variable button_index zu speichern und
das gewünschte Section-Element aufzurufen.Wenn ich das richtig verstehe, dann brauchst du nicht wirklich den index, sondern du willst wissen, welcher Button gedrückt wurde.
Bringen nicht Radio-Buttons von Haus aus das von dir gewünschte Verhalten mit?
Die lassen sich mit CSS bestimmt so umformatieren, dass sie wie normale Buttons aussehen und der ausgewählte dann wie ein gedrückter Knopf aussieht.
Viel Erfolg
Mecki-
Om nah hoo pez nyeetz, Mecki!
Die lassen sich mit CSS bestimmt so umformatieren, dass sie wie normale Buttons aussehen und der ausgewählte dann wie ein gedrückter Knopf aussieht.
Formularelemente sehen je nach UA/OS-Version anders aus. Du könntest sie so stylen, dass sie wie ein Button aussehen, aber du kannst sie nicht so stylen, dass sie (in allen Browsern, unter allen Betriebssystemen) wie der gewohnte Button aussehen.
Matthias
-
Om nah hoo pez nyeetz, Mecki!
Formularelemente sehen je nach UA/OS-Version anders aus. [...] du kannst sie nicht so stylen, dass sie (in allen Browsern, unter allen Betriebssystemen) wie der gewohnte Button aussehen.Matthias
Hallo Matthias
War auch nicht mein Ansinnen. Ich mag nur das Rad nicht immer wieder neu erfinden und für mich las sich das wie Radiobuttons. Denn beim Klicken auf einen Button soll ja auch ein anderer vorher angeklickter wieder in seinen Ursprungszustand versetzt werden.
Aber um komplett ohne JavaScript arbeiten zu können, muss ich soviele identisch aufgebaute Webseiten haben, wie Buttons, oder?
Mecki
-
Om nah hoo pez nyeetz, Mecki!
Aber um komplett ohne JavaScript arbeiten zu können, muss ich soviele identisch aufgebaute Webseiten haben, wie Buttons, oder?
nein. Die Struktur des HTML muss eine andere sein. Du kannst die Pseudoklasse target verwenden, wie molily vorschlug oder du erstellst ein HTML
<input type="radio"> <section> </section>und das CSS dazu
section { /* ausblenden */ } :checked + section { /* einblenden */ }Die Browserunterstützung sollte ähnlich sein.
Matthias
-
Hallo,
Du kannst die Pseudoklasse target verwenden, wie molily vorschlug
Nur fürs Protokoll, ich habe nicht vorgeschlagen, :target zu verwenden, und würde :target für einen solchen Anwendungsfall auch nicht empfehlen.
Ich habe zwar vorgeschlagen, Links zu verwenden, aber wie gewohnt JavaScript zum ein- und ausblenden. So arbeitet auch die von mir verlinkte barrierefreie Tab-Implementierung.
Grüße,
Mathias
-
-
-
-
-
Hallo nochmal,
vielen Dank für eure Hilfen.
Ich habe eure Tipps und Anweisungen wahrnehmend getüftelt und das gewünschte Ergebnis bekommen.
Würde mich freuen, wenn Ihr euch meinen Code mal anschaut und mir sagen könnt ob ich den Code nicht weiter vereinfachen könnte, also könnte ich bspw den Inhalt des li-Elements aus dem die id der section generiert wird nicht als Parameter übergeben, und kann ich irgendwie die doppelte for-Schleife umgehen.
Bin eigentlich so schon mehr als zufrieden, nur helfen eben solche Feinheiten beim tieferen Verständnis.
<ul> <li>EINS</li> <li>ZWEI</li> </ul> <section id="eins"> <p>AAAAA </section> <section id="zwei"> <p>BBBBB </section>body {font-family: Verdana;} ul{padding: 0;} li{background-color: green; color: #fff; list-style: none; display: inline-block; padding: 3px 9px; border-radius: 3px; cursor: pointer; margin-right: 3px; font-weight: bold; font-size: 13px;} section{display: none;}var li = document.getElementsByTagName("li"); var section = document.getElementsByTagName("section"); /* Durchlaufe alle vorhandenen li-Elemente. */ for(var i = 0; i < li.length; i++) { /* Ermittle welches li-Element die Funktion auslöst. */ li[i].onclick = function() { /**************************************************************************** * Generiere aus dem Inhalt des angeklickten li-Elements die id der Section, * * welche angezeigt werden soll und speichere diese in einer Variable. * * Der Wert wird sicherheitshalber immer in Kleinbuchstaben umgewandelt. * ****************************************************************************/ var id_aus_li = this.innerHTML.toLowerCase(); for(var i = 0; i < li.length; i++){ li[i].style.backgroundColor = "green"; section[i].style.display = "none"; } this.style.backgroundColor = "red"; document.getElementById(id_aus_li).style.display = "block"; } }Danke nochmal
LG vsenol
