Chapter IV tab

Why 80% of the code can not do farming architect? >>>

Reference links:

http://v3.bootcss.com/components/#nav-tabs

http://v3.bootcss.com/javascript/#tabs

A hidden way to implement the switching tab

Just simply add a page element data-toggle="tab"or data-toggle="pill"may not need to write any JavaScript code can also be activated navigation tab or capsules.

To uladd .navand .nav-tabsclasse to give them a Bootstrap tab style ; added navand nav-pillsclass can give them a capsule tab style .

href and div id must correspond

<!-- 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>

Two, js method for real-time access to new page, tab to switch to achieve

<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>

Renderings:

Reproduced in: https: //my.oschina.net/garyun/blog/602747

Guess you like