Moin,
Ich möchte gerne von Bootstrap dieses Navigationsmenü verwenden:
https://getbootstrap.com/docs/4.0/components/navs/
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...
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
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">
<a 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">
<a 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">
<a 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">
<a 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>
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">
<a 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">
<a 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">
<a 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">
<a 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>
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
Kommentar