asp.net mvc 4 個選項卡

我正在使用 Visual Studio 2010 ASP.Net MVC4（引擎視圖 Razor）開發一個項目，需要製作一個選項卡。我定義了這個腳本和 css：

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>

它還定義了選項卡的 html 格式：

<div id="tabs"> .....

但是當執行不顯示標籤時，我該如何解決這個問題。只顯示格式 html，這個：

指數

標籤頁眉 1

標籤頁眉 2

標籤頁眉 3

Tab 1 的內容在這裡。

Tab 2 的內容在這裡。

Tab 3 的內容在這裡。

如果您使用 ASP.net MVC4 然後 config _Layout.cshtml 將此行添加到 Head html

@Styles.Render("~/Content/css")    
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")

並從正文（html）中刪除這一行

@Scripts.Render("~/bundles/jquery")

並執行程序並顯示選項卡

這是 Jquery Tabs 的jsfiddle。

第 1 步：導入

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>

第 2 步：HTML 程式碼

在“li”標籤中，您需要定義選項卡標題，並且每個選項卡標題都存在一個選項卡內容 div，下面的程式碼非常自我解釋。

<div id="tabs">

<ul>
   <li><a href="#tabs-1">Tab Header 1</a></li>
   <li><a href="#tabs-2">Tab Header 2</a></li>
   <li><a href="#tabs-3">Tab Header 3</a></li>
</ul>

<div id="tabs-1">
Content for Tab 1 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div id="tabs-2">
Content for Tab 2 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div id="tabs-3">
Content for Tab 3 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>

第 3 步：Final Touch – 對 tabs() 的 Jquery 呼叫

<script type="text/javascript">
   $(function () {
       $("#tabs").tabs();
   });
</script>

輸出：

資源

引用自：https://stackoverflow.com/questions/13219874