asp.net mvc 4标签

Question

我正在使用Visual Studio 2010 ASP.Net MVC4(引擎视图Razor)开发一个项目,需要制作一个标签.我定义了这个scrips和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"> .....

但是当excecute没有显示标签时,我怎么能解决这个问题.只有showme格式的html,这个:

指数

标签页面1

标签页眉2

标签页眉3

选项卡1的内容在此处.

Tab 2的内容在这里.

Tab 3的内容在这里.

Answer 1

这是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步:最终触摸 - Jquery调用tabs()

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

输出:

资源

Answer 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")

并从body(html)中删除此行

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

并执行程序并显示选项卡

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