Question

我有一个部分视图呈现了一堆控件，我还希望它包含一系列JQuery选项卡。选项卡呈现正常：

    <div id="comment-tabs">
      <ul>
        <li><a href="#comment-tabs-1">Comments</a></li>
        <li><a href="#comment-tabs-2">Contact Events</a></li>
      </ul>
      <div id="comment-tabs-1">
        <p>Comments</p>
      </div>
      <div id="comment-tabs-2">
        <p>Contact Events</p>
      </div>
    </div>

<script> $( function() {$( "#comment-tabs" ).tabs();});</script>

但是，当我点击任何标签时，我的整个页面只会重新加载页面网址。它似乎将标签视为普通的超链接，而不是以“Tab”的形式使用它们。

有没有其他人有过使用此类部分观点的经验......我做错了什么或遗失了什么？

Answer 1

以下是我当前的工作设置，该页面包含2个选项卡，每个选项卡都来自局部视图。主页面有一个视图模型，每个选项卡内容都有一个单独的类。在此示例中，视图模型将具有两个名为Tab1Model和Tab2Model的类。

<div>
    <div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
            <li><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
        </ul>
    </div>

    <div class="tab-content">
        <div id="tab1" class="tab-pane active">
            @Html.Partial("_Tab1PartialView", Model.Tab1Model)
        </div>

        <div id="tab2" class="tab-pane fade">
            @Html.Partial("_Tab2PartialView", Model.Tab2Model)
        </div>
    </div>
</div>

我注意到你似乎也缺少列表元素中的一些属性。我认为你使用的是bootstrap css。

我已经修改了你的标记以匹配我的标记。

<div id="comment-tabs">
    <ul>
        <li><a href="#comment-tabs-1" role="tab" data-toggle="tab">Comments</a></li>
        <li><a href="#comment-tabs-2" role="tab" data-toggle="tab">Contact Events</a></li>
    </ul>
    <div id="comment-tabs-1">
        //Comments PartialView ref here
    </div>
    <div id="comment-tabs-2">
        //Contact Events PartialView ref here
    </div>
</div>

希望有所帮助。

Answer 2

我发现这是一个JQuery的东西，在我工作的地方出现过。简单的解决方案是添加class =＆＃34; non-link＆＃34;到锚...

<li><a href="#comment-tabs-1" class="non-link">Comments</a></li>
<li><a href="#comment-tabs-2" class="non-link">Contact Events</a></li>

努力享受！

在（MVC）部分视图中使用JQuery选项卡

2 个答案: