使用jquery刷新div选项卡onclick？

Question

我正在使用选项卡，但想知道是否可以在单击时“刷新”选项卡内容？

Answer 1

下面是我在 asp.net mvc 中使用 ajax 的方法：

<div id="content">
    <ul>
        <li><a href="#tab0"><span>Details</span></a></li>
        <li><a href="#tab1"><span>Cost</span></a></li>
        <li><a href="#tab2"><span>Bookings</span></a></li>
    </ul>
    <div id="tab0"></div>
    <div id="tab1"></div>
    <div id="tab2"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            var $tabs = $("#content").tabs({
                select: function(e, ui) {
                    var thistab = ui;
                    runMethod(thistab.index);
                }
            });
        });
    });

    function runMethod(tabindex) {
        switch (tabindex) {
            case 0:
                getTabZeroData();
                break;

            case 1:
                getTabOneData();
                break;

            case 2:
                getTabTwoData();
                break;
        }
    }
</script>

<script type="text/javascript">
// ajax getTabnnn methods here...
</script>

每个 getTabnnnData 方法都运行它自己的小 ajax 例程，并且填充了 div。这是非常有效的，因为你也可以变得聪明一点，只在目标 div 仍然为空等情况下运行该方法。

希望这能给事情带来另一种倾向。

吉姆

Answer 2

是的，这是可能的，但你不需要 onClick 事件，我认为

使用这个

<div id="example">
     <ul>
         <li><a href="ajaxpage1.php"><span>Content 1</span></a></li>
         <li><a href="ajaxpage2.php"><span>Content 2</span></a></li>
         <li><a href="ajaxpage3.php"><span>Content 3</span></a></li>
     </ul>
</div>

注意：不是给出选项卡分区的 id，而是给出页面链接
因此，每次您单击选项卡时，它都会更新它，

这会优雅地降级 - 链接（例如内容）在禁用 JavaScript 的情况下仍然可以访问。

ps：我假设你有一个
工作选项卡

Answer 3

请理解，这很可能不是执行此操作的最佳方法。但这就是他所要求的。

function tabrefresh(){
    $( "#tabs" ).tabs( "refresh" );
};

<button onclick="tabrefresh()">Refresh Tabs</button>

Answer 4

简单的：
http://docs.jquery.com/UI/Tabs

;)