Bootstrap - Tabs and Pills: Unterschied zwischen den Versionen
Aus Wikizone
(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…“) |
|||
| 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. | 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=" | + | <syntaxhighlight lang="html5"> |
<ul class="nav nav-tabs" id="myTab"> | <ul class="nav nav-tabs" id="myTab"> | ||
<li class="active"><a href="#home">Home</a></li> | <li class="active"><a href="#home">Home</a></li> | ||
Version vom 5. August 2015, 07:24 Uhr
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.
<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>
