Wie können diese Registerkarten funktionieren?

Question

Ich bin gerade dabei, JS zu lernen, und habe beschlossen, ein einfaches Tab von Grund auf zu schreiben.

Ich habe zwei Funktionen. Ein für das Hinzufügen von Klasse 'active' zu jedem Reiter und ein weiteren diese Funktion für die Auslösung von

hier auf li in der Navigation klicken ist mein Code
https://codepen.io/Allan11/pen/Bzvxya

Problem ist, dass Klassen toggels scheint nicht den richtigen Weg zur Arbeit . Könntest du mir die richtige Richtung zeigen, wie ich es beheben kann, oder ist vielleicht nur mein Ansatz zu diesen Funktionen falsch und es gibt einen einfacheren Weg?

Answer 1

Wenn Sie dies auf diese Weise schreiben möchten, müssen Sie das Element abfangen, auf dem das click-Ereignis ausgelöst wurde, indem Sie einen Parameter in Ihren Handler setzen und die srcElement darauf betrachten. Dies wird Ihnen sagen, welche Ihrer li Artikel angeklickt wurde. Dann müssen Sie jedoch einen Weg finden, um festzustellen, welcher Inhalt zu diesem li-Element gehört, und ihm die Klasse .active zuweisen und die Klasse von allen anderen entfernen. Ich persönlich würde eine gemeinsame Klasse oder ein Datenelement auf der li verwenden, um dies zu tun.

All dies scheint jedoch zu versuchen, etwas zu tun, das bereits in den jQuery- und jQuery-UI-Frameworks perfekt vorhanden ist. Sofern Sie keinen wirklich guten Grund haben, das Rad neu zu erfinden, würde ich einfach jQuery UI verwenden.