Question

我想在更改标签时刷新所有标签内容。例如，我有3个选项卡，当选择第二个时，我刷新第一个和第三个。当我单击选项卡时，其他解决方案会重新加载选项卡内容。

有什么想法吗？

谢谢，

我抓住了更改标签事件，如下所示：

$("#tabs").bind('tabsselect', function (event, ui) {
   //ui.index is tab selected
});

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Choice1</a></li>
        <li><a href="#tabs-2">Choice2</a></li>
        <li><a href="#tabs-3">Choice3</a></li>
    </ul>
    <div id="tabs-1">@Html.Partial("Choice1", Model)</div>
    <div id="tabs-2">@Html.Partial("Choice2", Model)</div>
    <div id="tabs-3">@Html.Partial("Choice3", Model)</div>
</div>

Answer 1

你为什么要用它？

只需使用位于此处的ajax选项加载：Load tab data through ajax

因此您无需刷新标签1＆amp; 3，因为它们不可见:)。只需重新加载您想要查看的数据，它就可以节省您页面的负担！

顺便说一句，我在UI标签演示中与此功能有关：

$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        }
    });
});

Answer 2

您的标签将包含<ul>，其中包含所显示标签的名称。

<ul>

            <li><a href="#tabs-1" id="tab-1">Tab1</a></li>

            <li><a href="#tabs-2" id="tab-2">Tab2</a></li>




        </ul>

此外，您将获得选项卡的div列表

<div id="tabs-1" style="width:98%;">

    <span style="padding-left:200px;font-size: 1em;">  &nbsp;&nbsp;&nbsp;  <strong>Loading....</strong> </span>

    </div>

    <div id="tabs-2" style="width:98%;">
    <span style="padding-left:200px;font-size: 1em;">  &nbsp;&nbsp;&nbsp;  <strong>Loading....</strong> </span>
    </div>

如果要重新加载tab2，请单击选项卡-1，只需加载tabs-2 div

$（“＃tab-1”）。livequery（'click'，function（event）{

              $("#tabs-2").load('url');
              });

更改jQuery UI选项卡时重新加载所有页面

2 个答案: