Ankündigung

Einklappen
Keine Ankündigung bisher.

JavaScript Tabs mit OnClick / Funkton Mit Enter Taste bestätigen

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JavaScript Tabs mit OnClick / Funkton Mit Enter Taste bestätigen

    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.

    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>


  • #2
    Hier ein funktionierendes Beispiel:


    PHP-Code:
    <html>
    <
    head>

    <
    style>
    .
    tab {
      
    overflowhidden;
      
    border1px solid #ccc;
      
    background-color#f1f1f1;
    }

    .
    tab a {
      
    background-colorinherit;
      
    floatleft;
      
    bordernone;
      
    outlinenone;
      
    cursorpointer;
      
    padding14px 16px;
      
    transition0.3s;
    }

    .
    tab a:hovera:focus {
      
    background-color#ddd;
    }

    .
    tab a.active {
      
    background-color#ccc;
    }

    .
    tabcontent {
      
    displaynone;
      
    padding6px 12px;
      
    border1px solid #ccc;
      
    border-topnone;
    }

    .
    displayBlock {
      
    displayblock;
    }
    </
    style>

    <
    script>

    window.onload = function () {
      var 
    tabLinkElms document.getElementsByClassName('tablinks');
      for (var 
    0tabLinkElms.lengthi++) {
          
    tabLinkElms[i].addEventListener('click'openfalse);

          
    tabLinkElms[i].addEventListener('keypress', function (e) {
            if (
    e.keyCode == 13) {
              
    open(e);
            }
          }, 
    false);
      }

      function 
    open(event) {

        var 
    activeLinkElm event.target;
        var 
    prevActiveLinkElm document.getElementsByClassName("active");
        
    prevActiveLinkElm prevActiveLinkElm[0];

        var 
    activeContentElmId activeLinkElm.dataset.target;
        var 
    prevContentElmId prevActiveLinkElm.dataset.target;

        
    prevActiveLinkElm.classList.remove("active");
        
    document.getElementById(prevContentElmId).classList.remove("displayBlock");

        
    activeLinkElm.classList.add("active");
        
    document.getElementById(activeContentElmId).classList.add("displayBlock");
      }
    }
    </script>

    </head>

    <body>

    <!-- Tab Navigation -->
    <div class="tabpanel">
    <div class="tab">
      <a tabindex="0" class="tablinks active" data-target="id1">GGGGGGG</a>
      <a tabindex="0" class="tablinks" data-target="id2"> AAAAA</a>
      <a tabindex="0" class="tablinks" data-target="id3">UUUUU</a>
    </div>

    <!-- Tab content -->
    <div id="id1" class="tabcontent displayBlock">
      <p> text1 </p>
    </div>
    <div id="id2" class="tabcontent">
      <p> text2 </p>
    </div>
    <div id="id3" class="tabcontent">
      <p> text3 </p>
    </div>

    </div>
    </body>
    </html> 

    Kommentar


    • #3
      Meister1900
      ist es nicht einfacher, den Link zu posten? Dein c&p ohne Quellennachweis ist unerträglich...

      Kommentar


      • #4
        Dann zeig mir doch mal die Quelle incl. keyHandler kaminbausatz
        Ging ja nur darum, dass man die Tabs per Tabulator und Enter wechseln kann.
        Und das habe ich da selber eingebaut, auch wenn der Code ursprünglich von StackOverflow kommt.
        Sorry, dass ich nicht jedes Mal das Rad komplett neue erfinde, wenn ich hier auf freiwilliger Basis jemandem helfe.
        Davon abgesehen war der Code hier vom TE auch schon in Teilen von Stackoverflow.
        Und bezüglich Erfordernis von Quellenangaben wurdest du in einem anderen Thread schon belehrt.
        Also halt mal lieber den Ball flach!

        Kommentar


        • #5
          Meister1900

          erstens wurde ich nicht belehrt, ich wüsste nicht von wem, zweitens solltest Du Dir solche Ergüsse wie "halt mal lieber den Ball flach" sparen.

          Das hat etwas mit Wertschätzung der Arbeit anderer zu tun. Du kopierst einfach fremden Code und setzt den unter Deinem Namen in dieses Forum.

          Wo ist denn das Problem kurz die Quelle zu benennen und zu schreiben was man ergänzt hat?

          Weiterhin ist es schwierig bis unmöglich die Fähigkeiten der Beteiligten einzuschätzen, wenn mit "geborgtem" Code gearbeitet wird. Deswegen sollte wirklich immer ein Hinweis auf die Quelle vorhanden sein. Ich habe hier schon oft erlebt, dass einem gescheiten Codeschnipsel die dämlichste Frage folgt....

          Kommentar


          • #6
            Um wieder zum Thema zurück zu kommen...

            eine Tab-Lösung ist bei geringen Breiten wie z.B. beim Handy nicht immer angebracht. Ich habe das seinerzeit mal mal so gelöst, dass bei kleinen Auflösungen die Tabs zum Accordeon mutieren. Nur mal so als Diskussionsgrundlage... (Der Code ist schon einige Jahre alt und daher noch nicht auf die neueste Javascript Version angepasst...) Das noscript im Header habe ich eben eingefügt, damit keiner mit "ja wenn aber Javascript ausgeschaltet ist.." argumentiert. Diesen Bereich kann man beliebig anpassen. Die a hrefs habe ich eben eingebaut, damit man mit tab und enter an die Inhalte kommt.

            HTML-Code:
            <!doctype html>
            <html lang="de">
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <style>
                *{margin:0px;padding:0px;box-sizing:border-box;font-family:calibri;}
                @media screen and (min-width: 1025px) {
                  article{
                      display:flex;
                      flex-wrap:wrap;
                      font-family:calibri;
                      width:90%;
                      margin:auto;
                    }
                  article section>*:not(header){display:none;}
            
                  article section header{
                    padding: 0 40px;
                    cursor:pointer;
                    background:#ddd;
                    display:block;
                    border:1px solid #bbb;
                  }
                  #fhw-tab{
                    background:#efe;
                    padding:10px;
                    border:1px solid #aaa;
                    margin-top:-1px;
                    z-index:-100;
                  }
                  .fhw-tab-aktiv {background:#eee;border-bottom:1px solid #efe;}
                }
                @media screen and (max-width: 1024px) {
                  .fhw-tabs{
                    margin:10px;
                    border:1px solid #bbb;
                    border-radius:10px;
                  }
                  #fhw-tab{display:none;}
                  article{
                    padding:10px;
                  }
                  article.fhw-tabs section header{display:flex;justify-content: space-between;align-items: center;cursor:pointer;background:#eee;}
                  article.fhw-tabs section header:after{content: '\25BC';padding-right:20px;}
                  article.fhw-tabs section header ~ * {display:none;}
                  article.fhw-tabs section header.fhw-tab-aktiv ~ * {display:block;}
                  article.fhw-tabs section header.fhw-tab-aktiv {background:#ccc;}
                  article.fhw-tabs section header{cursor:pointer;background:#eee;}
                  article.fhw-tabs section header:hover{background:#eaeaea;}
                }
                a, a:visited {color:#000;text-decoration:none;}
                </style>
            
              <noscript>
                <style>
                   article section>*:not(header){display:block;}
                   article.fhw-tabs section header ~ * {display:block;}
                   article.fhw-tabs section header:after{content: ' ';padding-right:20px;}
                   /* das kann man ja beliebig anpassen... */
                </style>
              </noscript>
            
            
            </head>
            <body>
            <br>
            <article class="fhw-tabs">
              <section>
                <header>
                    <h2><a href="#">Tab1</a></h2>
                </header>
                <p>
                  Das ist Tab 1
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eligendi culpa ipsa repudiandae quas architecto laboriosam aspernatur, fugiat ducimus, perferendis.
                </p>
                <h3>sadj aksld</h3>
              </section>  
            
              <section>
                <header>
                    <h2><a href="#">Tab2</a></h2>
                </header>
                <p>
                  Das ist Tab 2
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eligendi culpa ipsa repudiandae quas architecto laboriosam aspernatur, fugiat ducimus, perferendis.
                </p>
              </section>
            
              <section>
                <header>
                    <h2><a href="#">Tab3</a></h2>
                </header>
                <p>
                  Das ist Tab 3
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eligendi culpa ipsa repudiandae quas architecto laboriosam aspernatur, fugiat ducimus, perferendis.
                </p>
              </section>
            
             <section>
                <header>
                  <h2><a href="#">Tab4</a></h2>
                </header>
                <p>
                  Das ist Tab 4
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eligendi culpa ipsa repudiandae quas architecto laboriosam aspernatur, fugiat ducimus, perferendis.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, eveniet, rerum, delectus excepturi nihil perferendis consequatur distinctio accusantium quia autem consequuntur magni ad incidunt non earum ipsa rem assumenda minus commodi beatae libero qui voluptate cumque voluptates ab saepe id. Cum, ratione laudantium blanditiis ipsam odit illum beatae rerum fugit temporibus minus id minima recusandae dignissimos possimus accusamus quod exercitationem ut fuga natus ea eos mollitia autem sint itaque ullam porro ipsum. Id, nihil, corporis, animi pariatur dolorem doloribus eveniet possimus placeat quas accusamus recusandae reprehenderit enim! Animi, nam, voluptatibus perspiciatis praesentium labore soluta omnis quo eum optio doloremque enim ab harum quis vel dolores laudantium mollitia minus doloribus voluptates reiciendis tempore quisquam quibusdam quasi ex quos asperiores ullam natus rem sunt atque temporibus maiores saepe iure deserunt corrupti necessitatibus voluptate nesciunt nemo nisi repudiandae. Temporibus, ad, ipsa natus cum odit fugit ullam aspernatur dignissimos amet quisquam nobis maiores ipsum consectetur asperiores veritatis rerum mollitia. Quasi, incidunt voluptas et. Culpa, fuga perspiciatis neque quos odit mollitia! Sequi, ut, ab, tempore maxime saepe pariatur corporis cumque qui unde maiores animi quos delectus fugiat tempora repellendus dolorum dolores veritatis placeat omnis sunt! Neque qui labore sed mollitia molestiae a praesentium dolores sit.
                </p>
              </section>
            </article>
            <script>
                var newDiv = document.createElement("div");
                newDiv.id = "fhw-tab";
                newDiv.style.width="100%";
                document.getElementsByClassName("fhw-tabs")[0].appendChild(newDiv);
                var fhwFirstTab = document.querySelectorAll("article.fhw-tabs section:first-child");
                fhwFirstTab[0].getElementsByTagName('header')[0].classList.add("fhw-tab-aktiv");
                var appTab = fhwFirstTab[0].cloneNode(true);  
                appTab.removeChild(appTab.getElementsByTagName('header')[0]);
                document.getElementById("fhw-tab").innerHTML=appTab.innerHTML;
                var tabsClick=document.querySelectorAll("article.fhw-tabs section header");
                for (var i=0; i < tabsClick.length; i++){
                    tabsClick[i].onclick=function(){
                        document.querySelectorAll("article.fhw-tabs section header.fhw-tab-aktiv")[0].classList.remove("fhw-tab-aktiv");
                    this.classList.add("fhw-tab-aktiv")
                    var nodeCopy = this.parentElement.cloneNode(true);
                    nodeCopy.removeChild(nodeCopy.getElementsByTagName('header')[0]);
                    document.getElementById("fhw-tab").innerHTML=nodeCopy.innerHTML;
                        }
                }    
            </script>
            </body>
            </html>

            Kommentar


            • #7
              Leute ich danke euch alle wirklich für die Klasse Unterstützung, habe ich nicht erwartet! Ist doch alles gut, ihr wollt mir ja schließlich alle nur helfen. Und dafür bin ich euch allen wirklich sehr dankbar!

              Meister1900, danke für den Code und deine Mühe. Diese Variante gefällt mir wirklich sehr gut!

              kaminbausatz,
              dass bei kleinen Auflösungen die Tabs zum Accordeon mutieren.
              Gut das du das ansprichst, etwas ähnliches hatte ich auch noch vor. War aber erstmals zweitrangig da ich mich erstmals in JavaScript reinarbeiten wollte. Deine Variante gefällt mir auch sehr gut, eben wegen dieser wirklich tollen Funktion. Aber das ganze ist für mich noch ein wenig zu kompliziert.

              Ich habe allerdings schon eine ähnliche Frage in GuteFrage.de gestellt. Diese wurde allerdings nicht beantwortet, dachte ich zumindest bis gestern. Ich denke ich habe jetzt die für mich am besten geeignete Variante gefunden, auch da ich so meiner Meinung nach am besten lernen kann.

              Ich denke das hier ist eine sehr Anfänger freundliche Lösung die auf viele Dinge kopiert und angepasst werden kann. Falls es jemand interessiert, hiermit bin ich wirklich zu 100% zufrieden.


              Code:
              function openTab(evt, tabId) {
                let tabPanes = document.getElementsByClassName("tab-pane");
              
                for (let i = 0; i < tabPanes.length; ++i) {
                  tabPanes[i].style.display = "none";
                }
              
                let tabLinks = document.getElementsByClassName("tablink");
                let currentTabLink;
              
                for (let i = 0; i < tabLinks.length; ++i) {
                  tabLinks[i].className = tabLinks[i].className.replace(" active", "");
                }
              
                document.getElementById(tabId).style.display = "block";
                evt.currentTarget.className += " active";
              }
              
              function init() {
                function openTabByClick(evt) {
                  let associatedTab = evt.currentTarget.getAttribute("data-associated-tab");
                  openTab(evt, associatedTab);
                }
              
                function openTabByKey(evt) {
                  let keyCode = evt.keyCode ? evt.keyCode : evt.which;
              
                  if (keyCode === 13) {
                    let associatedTab = document.activeElement.getAttribute("data-associated-tab");
                    openTab(evt, associatedTab);
                  }
                }
              
                let tabs = document.getElementsByClassName("tablink");
              
                for (let i = 0; i < tabs.length; ++i) {
                  tabs[i].addEventListener("click", openTabByClick);
                  tabs[i].addEventListener("keypress", openTabByKey);
                }
              
                if (tabs.length > 0) {
                  tabs[0].click();
                }
              }
              document.addEventListener("DOMContentLoaded", () => init());
              HTML-Code:
              <div class="tabpanel">
                <ul class="tab-nav">
                  <li>
                    <a class="tablink" data-associated-tab="tab-pane-1" role="button" tabindex="0">HIER1</a>
                  </li>
                  <li>
                    <a class="tablink" data-associated-tab="tab-pane-2" role="button" tabindex="0">HIER2</a>
                  </li>
                </ul>
              
                <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


              • #8
                Du hast erkannt, dass Deine Tab-Überschriften in keinem Zusammenhang zum Inhalt stehen. Das wird für Suchmaschinen und ScreenReader aber auch für die Vorlesefunktion etwas schwierig.

                Kommentar


                • #9
                  Oh nein das habe ich bis jetzt noch nie beachtet. Wie kann man dem entgegenwirken?

                  Durch ändern der ID´s?

                  HTML-Code:
                  <div class="tab-content">
                      <div class="tab-pane" id="Uebersicht">HIER1</div>
                      <div class="tab-pane" id="Ausstattung">HIER2</div>
                  </div>
                  Oder mit einem "<h2>" Tag?

                  HTML-Code:
                  <div class="tabpanel">  
                  <ul class="tab-nav">    
                       <li><h2><a class="tablink" data-associated-tab="Uebersicht" role="button" tabindex="0">HIER1</a></h2></li>    
                       <li><h2><a class="tablink" data-associated-tab="Ausstattung" role="button" tabindex="0">HIER2</a></h2></li>  
                  </ul>
                  Oder wie meinst du das genau?

                  Kommentar


                  • #10
                    Folgendes Dokument
                    HTML-Code:
                    <!doctype html>
                    <html lang="de">
                      <meta charset="UTF-8">
                      <title>test</title>
                      <div class="tabpanel">
                        <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>
                        <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>
                    
                        <section>
                          <header>
                              <h2><a href="#">Tab1</a></h2>
                          </header>
                          <p>Das ist Tab 1
                        </section>  
                    
                        <section>
                          <header>
                              <h2><a href="#">Tab2</a></h2>
                          </header>
                          <p>Das ist Tab 2 
                        </section
                    wird im Lesemodus so dargestellt:
                    Code:
                    HIER1
                    HIER2
                    HIER1
                    HIER2
                    Tab1
                    Das ist Tab 1
                    Tab2
                    Das ist Tab 2
                    Du erkennst, dass bei der ersten Lösung die Überschriften vom Tabinhalt getrennt sind.

                    Kommentar


                    • #11
                      Ja stimmt, klar jetzt weiß ich was du meinst! Ich dachte aber das sollte eigentlich kein Problem sein, da dies sehr viele genauso machen. Und eigentlich sind dies ja auch nur die Bedienelemente. Ist aber ein guter Einwand, werde das aber auf jeden Fall mal genauer recherchieren!

                      Kommentar

                      Lädt...
                      X