Asp.net mvc 4 вкладки

Я работаю над проектом с Visual Studio 2010 ASP.Net MVC4 (Engine 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"> .....

но когда excecute не отображают вкладки, как я могу решить эту проблему. только формат showme html, это:

Индекс

Заголовок заголовка 1

Заголовок заголовка 2

Заголовок заголовка 3

Содержимое для вкладки 1 здесь.

Содержимое для вкладки 2 идет здесь.

Содержимое для вкладки 3 здесь.

ОТВЕТЫ

Ответ 1

Если вы работаете с 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")

и удалите из body (html) эту строку

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

и выполните программу и покажите вкладки

Ответ 2

Вот вкладка jsfiddle для вкладок JQuery.

Шаг 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 для вкладок()

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

Вывод:

enter image description here

Источник

Ответ 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= "вкладка" fade active " id =" tab_1 ", записи в tab_1 не будут отображаться при загрузке страницы.

Вместо этого я удалил fade в tab_1 (см. ниже)

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

или заменить его вкладкой class= "затухание активной в"

Это сработало для меня.