asp.net mvc 4 个选项卡答案

【问题标题】：asp.net mvc 4 tabsasp.net mvc 4 个选项卡
【发布时间】：2012-11-04 15:22:08
【问题描述】：

我正在使用 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 的内容在此处。

标签 3 的内容在此处。

【问题讨论】：

告诉我们你在
里面有什么，它会帮助你回答
它可能是添加到您的 HTML 中的覆盖 jQuery 引用。我发现了这个： Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) 标记在我的 HTML 的底部——它抹去了我在顶部引用的正确版本，那就是.tabs() 函数。

标签： asp.net-mvc-3 razor asp.net-mvc-4

【解决方案1】：

这是用于 Jquery 选项卡的 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 - Jquery 调用 tabs()

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

输出：

Source

【讨论】：

【解决方案2】：

如果您使用 ASP.net MVC4，则配置 _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")

并执行程序并显示选项卡

【讨论】：

【解决方案3】：

Bootstrap 3.x 解决方案：

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#tab_1" data-toggle="tab">Tab Header 1</a>
    </li>
    <li>
        <a href="#tab_2" data-toggle="tab">Tab Header 2</a>
    </li>
    <li>
        <a href="#tab_3" data-toggle="tab">Tab Header 3</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active" id="tab_1">
        <p>Content for Tab 1 goes here.</p>
    </div>
    <div class="tab-pane fade" id="tab_2">
        <p>Content for Tab 2 goes here.</p>
    </div>
    <div class="tab-pane fade" id="tab_3">
        <p>Content for Tab 3 goes here.</p>
    </div>
</div>

【讨论】：

【解决方案4】：

只是添加 Bootstrap 3.x 解决方案。我在使用时遇到了问题 class="tab-pane fade active" id="tab_1"，tab_1 中的条目将不会在页面加载时显示。

相反，我删除了 tab_1 中的 fade（见下文）

<div class="tab-pane active" id="tab_1">
    <p>Content for Tab 1 goes here.</p>
</div>

或将其替换为 class="tab-pane fade active in"

它对我有用。

【讨论】：