在我的mvc.net网络应用程序中，我使用bootstrap 3在选项卡视图中显示有关产品的各个方面。这很好用。该页面还有一个编辑按钮，该按钮导航到一个编辑页面，该页面具有相同的选项卡视图布局，但每个选项卡的部分视图将具有可编辑的输入/下拉菜单等。
我的详细信息视图中的标签视图是：
<div id="productdetail">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-11">
<div class="tab-content">
<div id="product" class="tab-pane fade in active">
@Html.Partial("_productDetails", Model)
</div>
<div id="stock" class="tab-pane fade">
@Html.Partial("_stockDetails", Model)
</div>
<div id="notes" class="tab-pane fade">
@Html.Partial("_Notes", Model)
</div>
<div id="manufacture" class="tab-pane fade">
@Html.Partial("_ManufactureDetails", Model)
</div>
</div>
<br />
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" data-theme="product" href="#product">Product</a></li>
<li><a data-toggle="pill" data-theme="stock" href="#stock">Stock</a></li>
<li><a data-toggle="pill" data-theme="notes" href="#notes">Notes</a></li>
<li><a data-toggle="pill" data-theme="manufacture" href="#manufacture">Manufacture</a></li>
</ul>
<br />
</div>
<span style="float:right; margin-right:10px;">
<input type="hidden" id="hd_SelectedTab" />
<button type="button" class="btn btn-default" style="margin-top:2px;" onclick="goEdit('@Model.ServerDetailID')">
Edit <span class="glyphicon glyphicon-edit"></span>
</button> |
<button type="button" class="btn btn-default" style="margin-top:2px;" onclick="location.href='@Url.Action("Index", "Home")'">
Back Home <span class="glyphicon glyphicon-home"></span>
</button>
</span>
</div>
点击链接后，我有以下功能，可以存储点击了哪个标签（链接）。
$("a[data-theme]").click(function () {
var $selectedTab = $(this).data("theme")
$("#hd_SelectedTab").val($selectedTab);
//alert('tab Selected is now: ' + $selectedTab);
});
单击“编辑”按钮会调用此函数...
function goEdit(sn) {
var tabSelected = $("#hd_SelectedTab").val();
window.location = "../Details/Edit?sn=" + '@Model.ServerDetailID' + "&ts=" + tabSelected;
}
JSFiddle - https://jsfiddle.net/DTcHh/20303/
在我的编辑视图中，我现在想要使用tabSelected值来选择相同的选项卡...即，如果选择了stock选项卡并单击了编辑按钮，则应打开编辑视图，并将stock选项卡作为活动选项卡。
我的编辑视图是：
<div id="productedit">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-11">
<div class="tab-content">
<div id="product" class="tab-pane fade in active">
@Html.Partial("_productEdit", Model)
</div>
<div id="stock" class="tab-pane fade">
@Html.Partial("_stockEdit", Model)
</div>
<div id="notes" class="tab-pane fade">
@Html.Partial("_NotesEdit", Model)
</div>
<div id="manufacture" class="tab-pane fade">
@Html.Partial("_ManufactureEdit", Model)
</div>
</div>
<br />
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" data-theme="product" href="#product">Product</a></li>
<li><a data-toggle="pill" data-theme="stock" href="#stock">Stock</a></li>
<li><a data-toggle="pill" data-theme="notes" href="#notes">Notes</a></li>
<li><a data-toggle="pill" data-theme="manufacture" href="#manufacture">Manufacture</a></li>
</ul>
<br />
</div>
<!-- Removed save button & notification panel for brevity -->
</div>
然后我有以下未完成的javascript
$(document).ready(function () {
var ts = '@ViewData("TabSelected")'
switch(ts) {
case "product":
// select the product tab and show partial view _productEdit
break;
case "stock":
// select the stock tab and show partial view _stockEdit
break;
case "notes":
// select the notes tab and show partial view _notesEdit
break;
case "manufacture":
// select the manufacture tab and show partial view _manufactureEdit
break;
default:
// select the product tab and show partial view _productEdit
}
})
JSFiddle - https://jsfiddle.net/os1pk3og/2/
如何实用地激活正确的链接并显示正确的局部视图？
更新
根据提供的答案，我针对每个标签面板进行了相应的更改
<div id="product" class="tab-pane fade @(If(ViewData("TabSelected") = "product", "in active", ""))">
@Html.Partial("_ProductEdit", Model)
</div>
和每个药丸链接
<li class=@(If(ViewData("TabSelected") = "product", "active", ""))><a data-toggle="pill" data-tabId="product" href="#product">Product</a></li>
答案 0 :(得分：0)
您可以尝试以下代码编辑视图： -
<div id="productedit">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-11">
<div class="tab-content">
<div id="product" class="tab-pane fade <?php echo ($ViewData['ts'] == 'product') ? 'in active' : ''; ?>">
@Html.Partial("_productEdit", Model)
</div>
<div id="stock" class="tab-pane fade <?php echo ($ViewData['ts'] == 'stock') ? 'in active' : ''; ?>">
@Html.Partial("_stockEdit", Model)
</div>
<div id="notes" class="tab-pane fade <?php echo ($ViewData['ts'] == 'notes') ? 'in active' : ''; ?>">
@Html.Partial("_NotesEdit", Model)
</div>
<div id="manufacture" class="tab-pane fade <?php echo ($ViewData['ts'] == 'manufacture') ? 'in active' : ''; ?>">
@Html.Partial("_ManufactureEdit", Model)
</div>
</div>
<br />
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<ul class="nav nav-pills nav-stacked">
<li class="<?php echo ($ViewData['ts'] == 'product') ? 'active' : ''; ?>"><a data-toggle="pill" data-theme="product" href="#product">Product</a></li>
<li class="<?php echo ($ViewData['ts'] == 'stock') ? 'active' : ''; ?>"><a data-toggle="pill" data-theme="stock" href="#stock">Stock</a></li>
<li class="<?php echo ($ViewData['ts'] == 'notes') ? 'active' : ''; ?>"><a data-toggle="pill" data-theme="notes" href="#notes">Notes</a></li>
<li class="<?php echo ($ViewData['ts'] == 'manufacture') ? 'active' : ''; ?>"><a data-toggle="pill" data-theme="manufacture" href="#manufacture">Manufacture</a></li>
</ul>
<br />
</div>
<!-- Removed save button & notification panel for brevity -->
</div>
它可能对您有帮助，请根据您更改PHP代码语法。