0

asp.net MVC(RAZOR) アプリケーションで jquery UI Tab を使用しています。私が見つけた問題は、各タブをクリックすると、最初のdiv、つまりここではIDが「tabs-1」のdivでhtmlがレンダリングされることです。

Jクエリコード:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>


<script type="text/javascript">
    $(function ($) {
        $('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
</script>

HTML:

<div id="example"  class="tabs"  style="width: 698px;">
                <ul style="list-style: none;">
                    <li><a href="/Details/Overview">Overview</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=5" >Specifications</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=1" >Exterior</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=2" >Interior</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=3" >Dimensions</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=4" >Feature</a></li>
                    <li><a href="/Version/Details?versionID=@ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
                    <li><a href="#tabs-8">Color</a></li>
                </ul>
                <div id="tabs-1" style="width: 698px;">
                    This is Tab one
                </div>
                <div id="tabs-2">
                </div>
                <div id="tabs-3">
                </div>
                <div id="tabs-4">
                </div>
                <div id="tabs-5">
                </div>
                <div id="tabs-6">
                </div>
                <div id="tabs-7">
                </div>
                <div id="tabs-8">
                </div>
            </div>

私を案内してください。

ありがとう、

@ポール

4

3 に答える 3

1

最後に、タイトル属性とコンテナのIDを次のように一致させることで解決策を得ました

<li><a href="/Details/Overview" title="tabs-1">OverView</a></li>
<li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=5" title="tabs-2">Specifications</a></li>


<div id="tabs-1" style="width: 698px;">This is Tab one</div>
<div id="tabs-2"> </div>

ありがとう、

@ポール

于 2012-11-29T15:42:02.747 に答える