第四章 标签页

 参考链接：

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>

效果图：