Question

我打算设置很多包含大量HTML的标签，我不会放慢页面速度，并且在页面加载时将所有内容加载到DOM。那么，只有在选中每个选项卡时，如何才能使用jQuery加载div内容？

HTML就是这样的：

<ul id="nav">
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
</ul>

<div id="content1">CONTENT</div>
<div id="content2">CONTENT</div>
<div id="content3">CONTENT</div>

Answer 1

使用AJAX确实可以实现这一目标。

您可以存储一组制表符内容对象，并根据制表符索引加载它们;

<div id="tabs">
    <ul>
      <li><a href="#content0">Tab 0</a></li>
      <li><a href="#content1">Tab 1</a></li>
      <li><a href="#content2">Tab 2</a></li>
    </ul>

    <div id="content0"></div>
    <div id="content1"></div>
    <div id="content2"></div>
</div>  

<script type="text/javascript">

    var tabcontent = new Array();

    /* Load page */
    tabcontent[0] = $('<div>').load('0.html');

    /* Add content */
    tabcontent[1] = $('<div>').html('Tab content 1');

    /* Add elements */
    tabcontent[2] = $('<div>').html('<div>Tab content 2</div>');

    $('#tabs').tabs({ activate: function(event ,ui) {
            $( '#content' + ui.newTab.index() ).html( tabcontent[ui.newTab.index()].html() );
        }
    });

</script>

请参阅jsFiddle

Answer 2

您可以使用Ajax加载必要的数据并将其放入div。顺便说一下，在这种情况下，你只需要一个div作为内容。

jQuery(document).ready(function(){
    jQuery('#nav a').click(function(){
        jQuery.get('get_content.php',{
            content: jQuery(this).attr('href').substr(1)
        },function(data){
            jQuery('#content').html(data);
        });
        return false;
    });
});

get_content.php会收到$ _GET ['content'] =='content1'或'content2'或'content3'，具体取决于点击了哪个按钮，因此知道这一点你应该从中返回必要的内容。

jQuery仅在选中时加载div内容

2 个答案: