在 (MVC) 分部视图中使用 JQuery 个选项卡

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>

但是，当我单击任何选项卡时，我的整个页面都会重新加载页面 URL。它似乎将标签视为普通超链接，而不是在其 'Tab' 容量中使用它们。

有没有其他人有这种使用像这样的局部视图的经验...我做错了什么或遗漏了什么吗？

Answer 1

下面是我当前的工作设置，页面包含 2 个选项卡，每个选项卡都来自局部视图。主页有一个视图模型，每个选项卡内容都有一个单独的 class。在此示例中，视图模型将有 2 个 classes，分别称为 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="non-link" 添加到锚...

<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 个选项卡

Using JQuery Tabs inside a (MVC) Partial View

asp.net-mvc

jquery

tabs

asp.net-mvc-partialview