Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap Tab Panel

Einklappen

Neue Werbung 2019

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

  • Bootstrap Tab Panel

    Moin,

    Ich möchte gerne von Bootstrap dieses Navigationsmenü verwenden:

    https://getbootstrap.com/docs/4.0/components/navs/

    PHP-Code:
    <ul class="nav nav-tabs" id="myTab" role="tablist">

      <
    li class="nav-item">
        <
    class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </
    li>
      <
    li class="nav-item">
        <
    class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </
    li>
      <
    li class="nav-item">
        <
    class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
      </
    li>
      <
    li class="nav-item">
        <
    class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </
    li>
    </
    ul>

    <
    div class="tab-content">
      <
    div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <
    div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <
    div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
      <
    div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
    </
    div
    Nun möchte ich aber innerhalb der Tab's verschiedene <form>'s machen und beim klick auf Submit soll der richtige Tab weiterhin "aktiv" sein (dort soll auch die Auswertung passieren).

    Ich kenne mich leider mit Javascript nicht gut aus, habe es folgendermassen ausprobiert, aber es funktioniert nicht...

    PHP-Code:

    <ul class="nav nav-tabs" id="myTab" role="tablist">

      <
    li class="nav-item">
        <
    class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </
    li>
      <
    li class="nav-item">
        <
    class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a/* ÄNDERUNG */
      
    </li>
      <
    li class="nav-item">
        <
    class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
      </
    li>
      <
    li class="nav-item">
        <
    class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </
    li>
    </
    ul>

    <
    div class="tab-content">
      <
    div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <
    div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"/* ÄNDERUNG */

    <form action="clients_profile.php" method="POST" id="contact-tab">
    <
    input id="firstname" type="text" class="form-control" name="firstname" placeholder="firstname" value="">
    <
    input name="edit" type="submit" class="form-control btn btn-success mt-3" value="Edit Client">
    </
    form>

    </
    div>
      <
    div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
      <
    div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
    </
    div>




    <
    script type="text/javascript">
    /* Tab handler */
      
    let contactform document.getElementById('contact-tab');

        if(isset(
    contactform)){
           $(
    'contact-tab').tab('show');
        }

    </script> 
    Hoffe mir kann hier jemand weiterhelfen...
    Wollte eigentlich ein Switch-Case in javascript machen, weil es ja mehrere Form's in unterschiedlichen Tab's sind... aber dafür muss ja das hier funktionieren...

    Merci schonmal

  • #2
    Du machst ein Affenformular und je nachdem aus welchem Tab das Formular kommt setzt du dann die CSS-Klasse vom tab-pane beim Seitenreload richtig ('show active').

    Kommentar


    • #3
      Hallo,

      Ich bin mir nicht sicher ob ich dich richtig verstanden habe , aber so funktioniert es:
      -> ich übergebe vom Formular ein hidden-Wert, diesen prüfe ich in der Auswertung:



      Ich prüfe ob $_POST existiert

      PHP-Code:
      if(isset($_POST["..."]){} 
      Darin mache ich einen switch case mit einer variable, welche ich an den jeweiligen Ort in die klasse gebe

      Gruss Newsletter

      Kommentar

      Lädt...
      X