Example tabs tabs active per onklick


CreativPur

Erfahrenes Mitglied
Hi,
ci habe folgendes Problem...
Ich habe ein dynamic tab, welches den ersten Tab aktiv hat.
Siehe Quellcode
HTML:
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Im Tab "Profile" möchte ich ein Formular einbinden.
Dieses Formular hat natürlich einen "submit-button">

Wenn ich diesen betätige, schließt sich mein "Profile_Tab" und das "Home-Tab" öffnet sich.

Wie kann ich es mit Javascript erreichen, dass das "Profile-Tab" weiterhin für weitere Aufgaben geöffnet bleibt ?

Leider ist ein onclick-Befehl ja bei einem Submitbutton nicht möglich!

als Links-Button habe ich es schon heraus bekommen, indem ich dem Tab eine ID erteile und folgen Link-Button tätige

HTML:
<li><a href="#profile" data-toggle="tab" id="profile_tab">Profile</a></li>

 <a class="btn btn-primary btn-lg" onclick="$('#profile_tab').trigger('click')">Profile</a>

Wie kann ich mein Ziel per Javascript umsetzen, so dass mein Profile-Tab geöffnet bleibt ?
 

CreativPur

Erfahrenes Mitglied
Ich benötige im Grunde genommen nur eine script-funktion, wo ich
HTML:
onclick="$('#profile_tab').trigger('click')"
einbinden kann...

So in etwa...
HTML:
<button type="submit" onclick="my_button_click_handler">Click this button</button>
Javascript:
function my_button_click_handler()
{
onclick('$('#profile_tab').trigger('click')');
}
 

CreativPur

Erfahrenes Mitglied
Ich habe jetzt folgendes versucht....

HTML:
<li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab" id="profile_tab">E-Mail</a></li>

<button type="submit" class="btn btn-primary" onclick="tab_active();" />Speichern</button>

und dazu das Script...

Javascript:
function tab_active() {
document.getElementById('form1').submit();
}       
function tab_active() {   
onclick($('#profile_tab').trigger('click'));
}

aber leider funktioniert dies auch nicht...
 

Sempervivum

Erfahrenes Mitglied
Wenn ich diesen betätige, schließt sich mein "Profile_Tab" und das "Home-Tab" öffnet sich.
Wie kann ich es mit Javascript erreichen, dass das "Profile-Tab" weiterhin für weitere Aufgaben geöffnet bleibt ?
Wenn Du das Formular abschickst, wird die Seite neu geladen, daher fallen die Tabs in den Ausgangszustand zurück.
Lösung 1: Die Formulardaten mit Ajax an den Server schicken, dann wird die Seite nicht neu geladen.
Lösung 2: Einen geeigneten GET-/Post-Parameter verwenden, um nach dem Neuladen den richtigen Tab wieder zu öffnen.