Bootstrap - Tabs and Pills - Versionsgeschichte

37.49.33.84 am 5. August 2015 um 06:28 Uhr

2015-08-05T06:28:44Z

37.49.33.84: /* Bootstrap 3: Keep selected tab on page refresh */

2015-08-05T06:25:55Z

Bootstrap 3: Keep selected tab on page refresh

37.49.33.84: /* Bootstrap 3: Keep selected tab on page refresh */

2015-08-05T06:24:57Z

Bootstrap 3: Keep selected tab on page refresh

37.49.33.84: Die Seite wurde neu angelegt: „== Bootstrap 3: Keep selected tab on page refresh == http://stackoverflow.com/questions/18999501/bootstrap-3-keep-selected-tab-on-page-refresh (2015-08) I pre…“

2015-08-05T06:24:33Z

Die Seite wurde neu angelegt: „== Bootstrap 3: Keep selected tab on page refresh == http://stackoverflow.com/questions/18999501/bootstrap-3-keep-selected-tab-on-page-refresh (2015-08) I pre…“

Neue Seite

== Bootstrap 3: Keep selected tab on page refresh ==
http://stackoverflow.com/questions/18999501/bootstrap-3-keep-selected-tab-on-page-refresh (2015-08)

I prefer storing the selected tab in the hashvalue of the window. This also enables sending links to colleagues, who than see "the same" page. The trick is to change the hash of the location when another tab is selected. If you already use # in your page, possibly the hash tag has to be split. In my app, I use ":" as hash value separator.
<syntaxhighlight lang="html">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>

<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
</syntaxhighlight>

@@ Zeile 3: / Zeile 3: @@
 I prefer storing the selected tab in the hashvalue of the window. This also enables sending links to colleagues, who than see "the same" page. The trick is to change the hash of the location when another tab is selected. If you already use # in your page, possibly the hash tag has to be split. In my app, I use ":" as hash value separator.
-<syntaxhighlight lang="html5">
+<syntaxhighlight lang="javascript">
 <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#home">Home</a></li>
@@ Zeile 17: / Zeile 17: @@
      <div class="tab-pane" id="settings">settings</div>
 </div>
 <script>
      $('#myTab a').click(function (e) {
          e.preventDefault();
@@ Zeile 34: / Zeile 32: @@
      var hash = window.location.hash;
      $('#myTab a[href="' + hash + '"]').tab('show');
 </syntaxhighlight>