為什么80%的碼農都做不了架構師？>>> ??

?參考鏈接：

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

總結

以上是生活随笔為你收集整理的第四章 标签页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。