Question

如果有人可以提供以下建议，我会很感激：我在主视图中有几个选项卡：

  <ul class='tabs' id="tabs" style="width: 100%">
        <li class="active"><a href='#tab1'>Status</a></li>
        <li class="inactive"><a href='#tab2'>Visit</a></li>
        ...
    </ul>


<div id='tab1'>
    <div id="StatusData">
        @{Html.RenderPartial("AddStatusPartial", Model.Card);}
    </div>
</div>
<div id='tab2'>
    <div id="VisitData">
        @{Html.RenderPartial("AddVisitPartial", Model.Card);}
    </div>
</div>

我的标签脚本如下：

 $('ul.tabs').each(function () {
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function (e) {
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $content = $($(this).attr('href'));

            // Make the tab active.
            $active.addClass('active');

            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });
    });

我唯一需要的是在点击它时重新加载唯一的second tab's内容（重新呈现部分视图）而不是仅显示它。单击其他选项卡时，应显示内容，因为它现在可以正常工作。

我想完全重新加载第二个标签，因为它的数据取决于其他标签中所做的更改，因此要显示这些更改，我需要重新呈现部分视图。

链接Here

Answer 1

您需要执行一些操作才能返回相应的部分视图...

然后你需要编码如下：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="/products/new">Tab 1</a></li>
    <li><a href="/products/resale">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

脚本如下：

 $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });

点击使用jQuery重新加载标签内容？

1 个答案: