0

我在我的 asp.net MVC(RAZOR) 应用程序中使用 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>

请指导我。

谢谢，

@保罗

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 回答
0

我认为 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 错误？

于 2012-11-28T18:42:05.293 回答
0

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

这是一个 jsfiddle 向您展示它的工作原理（完全没有任何 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>
于 2012-11-28T19:40:06.773 回答