参考链接:
http://v3.bootcss.com/components/#nav-tabs
http://v3.bootcss.com/javascript/#tabs
一、隐藏的方法实现tab切换
只需为页面元素简单的添加data-toggle="tab"
或 data-toggle="pill"
就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。
为ul
添加.nav
和.nav-tabs
classe即可为其赋予Bootstrap标签页样式;而添加nav
和nav-pills
class可以为其赋予胶囊标签页样式。
href和div id必须相对应
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
二、js方法实时获取新页面,实现tab切换
<h1> 实时tab</h1>
<ul id="myTab" class="nav nav-tabs">
<li><a href="@Url.Action("Index", "Time", new { type = 1 })">Time</a></li>
<li><a href="@Url.Action("Index", "Time", new { type = 2 })">Date</a></li>
<li><a href="@Url.Action("Index", "Time", new { type = 3 })">DateTime</a></li>
</ul>
@if ((int)ViewBag.Type == 1)
{
@Html.Partial("Time")
}
else if ((int)ViewBag.Type == 2)
{
@Html.Partial("Date")
}
else
{
@Html.Partial("DateTime")
}
@Html.Hidden("idxVal", (int)ViewBag.Type - 1)
<script type="text/javascript">
$(function () {
$("#myTab li:eq(" + $("#idxVal").val() + ")").addClass("active");
$("#myTab li:eq(" + $("#idxVal").val() + ") a").click();
});
</script>
效果图:
转载于:https://my.oschina.net/garyun/blog/602747