0

如果有人可以就以下内容提出建议，我将不胜感激：我的主视图中有几个选项卡：

  <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

4

1 回答 1

0

您需要一些操作来返回相应的局部视图...

然后你需要编写如下代码：

<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." );
        });
      }
    });
  });
于 2013-09-07T13:46:34.683 回答