gpt4 book ai didi

jquery - 如何在页面刷新时保留选定的 Bootstrap 选项卡?

转载 作者:IT王子 更新时间:2023-10-29 03:24:46 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 3 在刷新时保持选定的选项卡处于事件状态。尝试并检查了这里已经提出的一些问题,但对我来说没有用。不知道我哪里错了。这是我的代码

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
<li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
<li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
<li><a href="#career-path" data-toggle="tab">Career Path</a></li>
<li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
<div class="tab-pane active" id="personal-info">
tab data here...
</div>

<div class="tab-pane" id="Employment-info">
tab data here...
</div>

<div class="tab-pane" id="career-path">
tab data here...
</div>

<div class="tab-pane" id="warnings">
tab data here...
</div>
</div>

Javascript:

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
$('#'+selectedTab).tab('show');
}

最佳答案

我更喜欢将选定的选项卡存储在窗口的哈希值中。这也允许将链接发送给同事,他们会看到“相同”的页面。诀窍是在选择另一个选项卡时更改位置的哈希值。如果您已经在页面中使用#,则可能必须拆分散列标签。在我的应用程序中,我使用“:”作为哈希值分隔符。

<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>

JavaScript,必须在上面的 <script>...</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');

关于jquery - 如何在页面刷新时保留选定的 Bootstrap 选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18999501/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com