web-dev-qa-db-ja.com

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"> .....

しかし、実行時にタブを表示しないようにすると、どのようにこの問題を解決できますか。 showme形式のhtmlのみ、これ：

インデックス

タブヘッダー1

タブヘッダー2

タブヘッダー3

タブ1のコンテンツはここにあります。

タブ2のコンテンツはここにあります。

タブ3のコンテンツはここにあります。

asp.net-mvc-3razorasp.net-mvc-4
12
raranibar

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

プログラムを実行してタブを表示します

9
raranibar

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：最後の仕上げ– tabs（）へのjquery呼び出し

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

出力：

enter image description here

ソース

23
Yasser

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
Csaba Toth

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"に置き換えます

それは私のために働いた。

1
efren duran