如何解决重新加载后设置Active Bootstrap导航项
我的HTML页面中有这种情况:
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a class="nav-link" id="v-pills-stage-tab" data-toggle="pill" href="#v-pills-stage" role="tab" aria-controls="v-pills-stage" aria-selected="true">stage</a></li>
<li><a class="nav-link" id="v-pills-school-tab" data-toggle="pill" href="#v-pills-school" role="tab" aria-controls="v-pills-school" aria-selected="false">school</a></li>
<li><a class="nav-link" id="v-pills-sog-tab" data-toggle="pill" href="#v-pills-sog" role="tab" aria-controls="v-pills-sog" aria-selected="false">Host</a></li>
<li><a class="nav-link" id="v-pills-info-tab" data-toggle="pill" href="#v-pills-info" role="tab" aria-controls="v-pills-info" aria-selected="false">Info</a></li>
<li class="no-hover"><a class="nav-link" style="margin-top: 20px;"><strong>Settings</strong></a></li>
<li><a class="nav-link" id="v-pills-inner-tutor-tab" data-toggle="pill" href="#v-pills-inner-tutor" role="tab" aria-controls="v-pills-inner-tutor" aria-selected="false">Tutor</a></li>
<li><a class="nav-link" id="v-pills-tutor-sog-tab" data-toggle="pill" href="#v-pills-tutor-sog" role="tab" aria-controls="v-pills-tutor-sog" aria-selected="false">Host Tutor</a></li>
<li id="nav-item-durata-tab" class="@(Model.displayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-duration-tab" data-toggle="pill" href="#v-pills-duration" role="tab" aria-controls="v-pills-duration" aria-selected="false">duration</a></li>
<li id="nav-item-objective-tab" class="@(Model.displayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-objective-tab" data-toggle="pill" href="#v-pills-objective" role="tab" aria-controls="v-pills-objective" aria-selected="false">objective</a></li>
<li id="nav-item-user-tab" class="@(Model.displayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-tipo-utenza-tab" data-toggle="pill" href="#v-pills-user" role="tab" aria-controls="v-pills-user" aria-selected="false">User</a></li>
<li id="nav-item-activity-tab" class="@(Model.displayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-activity-tab" data-toggle="pill" href="#v-pills-activity" role="tab" aria-controls="v-pills-activity" aria-selected="false">Activity</a></li>
<li id="nav-item-validation-tab" class="@(Model.displayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-validation-tab" data-toggle="pill" href="#v-pills-validation" role="tab" aria-controls="v-pills-validation" aria-selected="false">Validation</a></li>
<li><a class="nav-link" id="v-pills-policy-tab" data-toggle="pill" href="#v-pills-policy" role="tab" aria-controls="v-pills-policy" aria-selected="false">policy</a></li>
<li><a class="nav-link" id="v-pills-rights-tab" data-toggle="pill" href="#v-pills-rights" role="tab" aria-controls="v-pills-rights" aria-selected="false">rights</a></li>
<li><a class="nav-link" id="v-pills-job-tab" data-toggle="pill" href="#v-pills-job" role="tab" aria-controls="v-pills-job" aria-selected="false">job</a></li>
</ul>
</div>
@section Scripts {
<script type="text/javascript" src="~/Scripts/alertify.min.js"></script>
<script>
$(document).ready(function () {
$('a[data-toggle="pill"]').on('shown.bs.tab',function (e) {
var target = $(e.target).attr("href"); // activated tab
if (target === '#v-pills-objective' || target === '#v-pills-user' ||
target === '#v-pills-activity' || target === '#v-pills-validation') {
refresh(target);
}
});
var targetTab = localStorage.getItem("tab");
if (targetTab != null) {
$('#nav nav-pills nav-stacked').find('#v-pills-stage').setAttribute('aria-selected',"false");
$('#nav nav-pills nav-stacked').find(targetTab).parent().addClass('active');
$('#nav nav-pills nav-stacked').find(targetTab).setAttribute('aria-selected',"true");
}
});
function refresh(target) {
var url = BASE_PATH + "ProjectPages/Index";
API_ajaxWrapper_Library.ajax(url,{
Traditional: true,method: "POST",data: {
},onDone: function () {
refreshTab(target);
},onFail: function () {
alertError();
}
});
}
function refreshTab(target) {
localStorage.setItem("tab",target);
location.reload(true);
}
</script>
}
在不同的选项卡中,我具有复选框或文本字段,用户可以在其中写或选择选项,每个选项卡都有一个保存按钮,我需要的是,如果我更改了某些选择并且没有保存它们,则退出该部分我从数据库刷新(到目前为止没有问题),我放置了location.reload(真);因为当我重新打开选项卡时,情况仅与模型不一致,因为这样做总是会重新打开第一个选项卡(默认情况下处于活动状态),并且
var targetTab = localStorage.getItem("tab");
if (targetTab != null) {
$('#nav nav-pills nav-stacked').find('#v-pills-stage').setAttribute('aria-selected',"true");
}
它不起作用,我该怎么办?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。