Index eines Elements auslesen

[molily]

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.php

Denn 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