JQuery UI选项卡-始终在第一个div中呈现html

Question

我在我的asp.net MVC(剃刀)应用程序中使用jquery UI Tab。我发现问题是，每个选项卡单击都会在第一个div中呈现html，即这里的div中的id为"tabs-1“。

Jquery代码：

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

请给我引路。

谢谢,

@paul

Answer 1

最后，我通过匹配title属性和容器的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>

谢谢,

@paul

Answer 2

我认为id="example“应该比class="tabs”div低一个级别。

        <div id="example" class="tabs" style="width: 698px;">
            <ul style="list-style: none;">
                <li><a href="/Details/Overview">This is Tab one</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;">
                Overview
            </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>
   </div>

编辑：

$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
$('#example')

您的jquery中的第三行应该做什么？它是不是生成了一个javascript错误，导致选项卡无法正常工作？

Answer 3

您的问题是锚点标记中的href。您必须将它们格式化为"#tabs-number“。

这里有一个jsfiddle向你展示了它的工作(完全没有任何CSS样式，因为你的例子中也没有提供CSS样式。但每个被单击的选项卡都会将您带到不同的选项卡内容。

http://jsfiddle.net/UBxPJ/

但基本上，变化是：

            <li><a href="#tabs-1">Overview</a></li>
            <li><a href="#tabs-2" >Specifications</a></li>
            <li><a href="#tabs-3" >Exterior</a></li>
            <li><a href="#tabs-4" >Interior</a></li>
            <li><a href="#tabs-5" >Dimensions</a></li>
            <li><a href="#tabs-6" >Feature</a></li>
            <li><a href="#tabs-7" >Instrument Panel</a></li>
            <li><a href="#tabs-8">Color</a></li>