jquery按钮 - 隐藏的div在显示后会刷新或加载

Question

我有一系列显示和隐藏div的按钮。我想只在按下按钮时加载隐藏div中的数据。所以基本上所有隐藏的div都会在显示后得到刷新或加载。

有人知道怎么做吗？

<button class="menubutton" id="1">1</button>
<button class="menubutton" id="2">2</button>
<button class="menubutton" id="3">3</button>
<button class="menubutton" id="4">4</button>


<div id="1" style="display:none;">
DATA
</div>

<div id="2" style="display:none;">
DATA
</div>

<div id="3" style="display:none;">
DATA
</div>

<div id="4" style="display:none;">
DATA
</div>

$("#1").button().click(function() {
$('#1').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
});

etc

Answer 1

使用AJAX加载内容：http://api.jquery.com/jQuery.get/

所以你做这样的事情：

$('.menuButton').click(function()) {
    $('.menuButton').hide();
    if ($(this).html() == '') {
        $.get('somepage.html', function(data) {
            $(this).html(data);
        });
    }
    $(this).show();
});