Javascript Tabs: Direkter Aufruf – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Javascript Tabs: Direkter Aufruf Fri, 11 Oct 19 09:24:07 Z https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758625#m1758625 https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758625#m1758625 <p>Liebe Community,</p> <p>ich habe mir mittels Javascript eine Seite mit Tabs gebastelt. Ich würde nun gerne wissen, ob es möglich ist, einen Tab direkt zu adressieren.</p> <p>https://mydomain.com öffnet automatisch den ersten Tab.</p> <p>https://mydomain.com#tab2 öffnet dann beispw. den zweiten Tab?</p> <pre><code class="block"><div class="tab"> <button class="tablinks" onclick="openTab(event, 'Tab1')" id="defaultOpen">erster Tab</button> <button class="tablinks" onclick="openTab(event, 'Tab2')" id="defaultOpen">zweiter Tab</button> <button class="tablinks" onclick="openTab(event, 'Tab3')" id="defaultOpen">dritter Tab</button> </div> </code></pre> <pre><code class="block">function openTab(evt, TabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(TabName).style.display = "block"; evt.currentTarget.className += " active"; } </code></pre> <p>Viele Grüße Christian</p> Javascript Tabs: Direkter Aufruf Fri, 11 Oct 19 09:51:20 Z https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758631#m1758631 https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758631#m1758631 <p>Hallo,</p> <p>vorweg: du solltest für die Manipulation der Klassen die dafür vorgesehenen Funktionen nehmen.</p> <p>Du musst dir Gedanken darüber machen, wie die Seite ohne Javascript aussehen soll. Am einfachsten machst du alle Tabs sichtbar und versteckst per Javascript alle bis auf den einen, der sichtbar sein soll.</p> <p>Zu deinem Problem: Du kannst nach dem Laden der Seite (<code>DOMContentLoaded</code>) den Hash abfragen und dann die Funktion <code>openTab</code> aufrufen. So werden dann auch die anderen Tabs versteckt.</p> <p>Hier ein paar Links zur Doku:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Location/hash" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/Location/hash</a></li> </ul> <p>Gruß<br> Jürgen</p> Javascript Tabs: Direkter Aufruf Fri, 11 Oct 19 10:06:45 Z https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758633#m1758633 https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758633#m1758633 <p>@@stalachristian</p> <blockquote> <p>ich habe mir mittels Javascript eine Seite mit Tabs gebastelt.</p> </blockquote> <p>Bei Tabs gibt es mehr zu tun als nur die <em>visuelle</em> Darstellung umszuschalten. Heydon Pickering hat das im Artikel <a href="https://inclusive-components.design/tabbed-interfaces/" rel="noopener noreferrer">Tabbed Interfaces</a> (<a href="https://inclusive-components.design/" rel="noopener noreferrer">Inclusive Components</a>) gut beschrieben und ein <a href="https://codepen.io/heydon/pen/veeaEa" rel="noopener noreferrer">funktionierendes Beispiel</a> vorgestellt.</p> <blockquote> <p>Ich würde nun gerne wissen, ob es möglich ist, einen Tab direkt zu adressieren.</p> </blockquote> <p>Dazu wäre in dem Beispiel in den letzten Zeilen des unobtrusive JavaScripts unter<br> <code class="language-js"><span class="token comment">// Initially activate the first tab and reveal the first tab panel</span></code><br> die <code>0</code> in die gewünschten Tabnummer zu ändern (d.h. von außen als Parameter zu übergeben).</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> Javascript Tabs: Direkter Aufruf Fri, 11 Oct 19 10:13:43 Z https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758634#m1758634 https://forum.selfhtml.org/self/2019/oct/11/javascript-tabs-direkter-aufruf/1758634#m1758634 <p>@@JürgenB</p> <blockquote> <p>vorweg: du solltest für die Manipulation der Klassen die dafür vorgesehenen Funktionen nehmen.</p> </blockquote> <p>Du meinst die Methoden von <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" rel="nofollow noopener noreferrer">Element.classList</a>.</p> <blockquote> <p>Du musst dir Gedanken darüber machen, wie die Seite ohne Javascript aussehen soll.</p> </blockquote> <p>Das auch. Aber du musst dir auch Gedanken darüber machen, wie die Seite ohne Aussehen präsentiert werden soll. Oder richtiger: dem Aussehen adäquat.</p> <p>Und wenn man dann die nötigen ARIA-Attribute richtig verwendet, braucht man keine Klassen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div>