Hallo alle miteinander,
Ich kenne mich mit JavaScript noch nicht wirklich gut aus, außer die Tabs und ein Accordeon habe ich noch nie etwas mit JavaScipt realisiert.
Und da ich die Code-Funktionsweise sehr übersichtlich finde, möchte ich diese nicht wieder unnötig zerstören..
Also die eigentlichen Tabs funktionieren schon, können aber nicht mit der Enter Taste bestätigt & aufgerufen werden.
function clickHandler & function keyHandler == nicht I.O.
Ich weiß nicht wie ich diese in ein Onclick Ereignis einfügen kann, geht das überhaupt?
Wobei die Funktion clickHandler eigentlich überflüssig ist, wichtiger ist die Funktion keyHandler.
Ich kenne mich mit JavaScript noch nicht wirklich gut aus, außer die Tabs und ein Accordeon habe ich noch nie etwas mit JavaScipt realisiert.
Und da ich die Code-Funktionsweise sehr übersichtlich finde, möchte ich diese nicht wieder unnötig zerstören..
Also die eigentlichen Tabs funktionieren schon, können aber nicht mit der Enter Taste bestätigt & aufgerufen werden.
function clickHandler & function keyHandler == nicht I.O.
Ich weiß nicht wie ich diese in ein Onclick Ereignis einfügen kann, geht das überhaupt?
Wobei die Funktion clickHandler eigentlich überflüssig ist, wichtiger ist die Funktion keyHandler.
Code:
function init() { function openTab(evt, tabName) { // Declare all variables. var i, tabpane, tablink; // Get all elements with class="tab-pane" and hide them. tabpane = document.getElementsByClassName("tab-pane"); for (i = 0; i < tabpane.length; i++) { tabpane[i].style.display = "none"; } // Get all elements with class="tablink" and remove the class "active". tablink = document.getElementsByClassName("tablink"); for (i = 0; i < tablink.length; i++) { tablink[i].className = tablink[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab. document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } var tablink = document.getElementsByClassName("tablink")[0]; if (typeof tablink !== 'undefined') { tablink.click(); } var tab = document.getElementsByClassName('tabpanel'); tab.addEventListener('click', clickHandler); tab.addEventListener('keypress', keyHandler); function clickHandler(evt) { openTab(evt); } function keyHandler(evt) { // Ermittelt den Keycode der gedrückten Taste. let keyCode = (evt.keyCode ? evt.keyCode : evt.which); // Überprüft ob die Taste "Enter" gedrückt wurde. if (keyCode === 13) { openTab(document.activeElement); } } } document.addEventListener("DOMContentLoaded", function () { init(); });
HTML-Code:
<div class="tabpanel"> <!-- Tab Navigation --> <ul class="tab-nav"> <li><a tabindex="0" class="tablink" onclick="openTab(event, 'tab-pane-1')">HIER1</a></li> <li><a tabindex="0" class="tablink" onclick="openTab(event, 'tab-pane-2')">HIER2</a></li> </ul> <!-- Tab Content --> <div class="tab-content"> <div class="tab-pane" id="tab-pane-1">HIER1</div> <div class="tab-pane" id="tab-pane-2">HIER2</div> </div> </div>
Kommentar