在ASP.NET MVC中的“页面加载"上选择“选项卡" [英] Select Tab on Page Load in ASP.NET MVC
本文介绍了在ASP.NET MVC中的“页面加载"上选择“选项卡"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Razor页面上有两个选项卡,我希望能够加载该页面并选择页面A或B.当前,页面已加载并且始终位于A上.我尝试按以下方式进行操作.
I have two tabs on a Razor page, I want to be able to load the page and either select page A or B. Currently, the page loads and always lands on A. I have attempted to do this as follows...
在主视图中,我将其称为产品视图
In my home view I call my products view
<a class="btn btn-default"
href='@Url.Action("Index", "Products", new { id = "productB" })'
role="button">
Learn More
</a>
我要在其中传递路由值"productB",以便尝试加载选项卡.在我的产品控制器中,我有
where I am passing the route value "productB" so I can attempt to load the tab. In my products controller I have
public ActionResult Index(object id = null)
{
if (id != null && !String.IsNullOrEmpty())
ViewBag.ActiveTab = id.ToString();
return View();
}
产品视图
@{
string activeTab = ViewBag.ActiveTab;
}
<div class="products container">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#productA">
<span class="glyphicon glyphicon glyphicon-plus-sign"></span>productA
</a>
</li>
<li>
<a data-toggle="tab" href="#productB">
<span class="glyphicon glyphicon glyphicon-align-left"></span>productB
</a>
</li>
</ul>
<div class="products-body">
<div class="tab-content">
<div id="productA" class="tab-pane active fade in">
...
</div>
<div id="productB" class="tab-pane fade">
...
</div>
</div>
</div>
</div>
具有功能
$(function () {
var selector = '@activeTab';
$("#" + selector).addClass("active");
// Also tried the following...
// var anchor = '@activeTab' || $("a[data-toggle=tab]").first().attr("href");
// $('a[href=' + anchor + ']').tab('show');
});
但这不会选择我的标签页.这似乎很简单,我如何才能使它正常工作?
But this does not select my tab page. This seems so simple, how can I get this to work?
推荐答案
尝试
$(function () {
var anchor = "@Html.Raw(HttpUtility.JavaScriptStringEncode(activeTab))"
|| $(".nav-tabs a").first().attr("href").replace('#','');
//$('#'+anchor).tab('show');
$('.nav-tabs a[href=#' + anchor + ']').tab('show');
});
还要确保您已已激活标签页
$('.nav-tabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
这篇关于在ASP.NET MVC中的“页面加载"上选择“选项卡"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文