你好,我正试图添加一个活动样式来指示我的web应用程序bt上的当前页面无法获得解决方案,我查看了以前的帖子和答案,我在那里看到了这个据说有效的
<ul class="nav">
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li><br/>
</ul>
当我在这个代码中使用数据切换属性时
<ul class="nav nav-tabs">
<li class="colour">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
<li class="colour">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
<li class="colour">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
</ul>
我无法重定向到具有数据切换属性的页面,但使该页面处于活动状态。
我已经提出了同样的问题。请看我的代码,我认为它对你有帮助,如果你有什么问题,我准备回答你。
视图:
<ul class="nav nav-tabs" id="myTab">
<li id="activeTab" class="active"><a data-toggle="tab" href="#active">Active</a></li>
<li id="currentTab" class=""><a data-toggle="tab" href="#current">Current</a></li>
<li id="completedTab" class=""><a data-toggle="tab" href="#completed">Completed</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="active" class="tab-pane fade active in">
@Html.Action("Active", "Home")
</div>
<div id="current" class="tab-pane fade">
@Html.Action("Current", "Home")
</div>
<div id="completed" class="tab-pane fade in">
@Html.Action("Completed","Home")
</div>
</div>
JavaScript-当需要从URL捕获活动选项卡并将其打开时
$(document).ready(function() {
var tab = @ViewBag.tabId;
switch (tab) {
case 1:
removeAllActiveTabs();
$('#activeTab').addClass('active');
$('#active').addClass('active');
$('#active').addClass('in');
break;
case 2:
removeAllActiveTabs();
$('#currentTab').addClass('active');
$('#current').addClass('active');
$('#current').addClass('in');
break;
case 3:
removeAllActiveTabs();
$('#completedTab').addClass('active');
$('#completed').addClass('active');
$('#completed').addClass('in');
break;
default:
$('#activeTab').addClass('active');
$('#active').addClass('active');
$('#active').addClass('in');
break;
}
});
function removeAllActiveTabs() {
$('#myTab').each(function() {
$(this).find('li').removeClass('active');
});
$('#myTabContent').each(function() {
$(this).find('div').removeClass('active');
$(this).find('div').removeClass('in');
});
}
JavaScript-如果您想在选项卡更改时更改URL
//When Client click on Tabs show in URL
$('#activeTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=1');
});
$('#currentTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=2');
});
$('#completedTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=3');
});
您需要在li中添加一个活动类名。示例:
<li class="active"><a data-target="#" data-toggle="pill" href="#users">Users</a></li>