13

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

しかし、実行時にタブが表示されない場合、どうすればこの問題を解決できますか。次の形式の html のみを表示します。

索引

タブ ヘッダー 1

タブ ヘッダー 2

タブ ヘッダー 3

ここにタブ 1 のコンテンツが入ります。

ここにタブ 2 のコンテンツが入ります。

ここにタブ 3 のコンテンツが入ります。

4

4 に答える 4

24

これは 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>

出力：

ここに画像の説明を入力

ソース

于 2012-11-05T05:21:11.067 に答える
9

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

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

于 2012-11-05T20:28:37.030 に答える
7

ブートストラップ 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>
于 2016-12-21T07:18:22.013 に答える