使用jQuery單擊時重新加載選項卡內容？

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." );
        });
      }
    });
  });