jQuery仅在选中时加载div内容

我计划设置许多包含大量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>

内容
内容
内容

您可以使用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将收到$\u get['content']=='content1'或'content2'或'content3'，具体取决于单击哪个按钮，因此知道这一点后，您应该从中返回必要的内容。

这确实最好使用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>

var tabcontent=新数组（）；
/*加载页*/
tabcontent[0]=$（''）.load（'0.html'）；
/*添加内容*/
tabcontent[1]=$（''）.html（'tabcontent1'）；
/*添加元素*/
tabcontent[2]=$（''）.html（'tabcontent2'）；
$（'#制表符'）。制表符（{激活：函数（事件，用户界面）{
$（'#content'+ui.newTab.index（））.html（tabcontent[ui.newTab.index（）].html（））；
}
});

---

请参见

使用Ajax加载内容。使用Ajax时，内容不需要在另一个页面上吗？我希望将每个选项卡的内容放在同一个页面上，但在我单击之前，DOM中没有加载任何内容。Ajax是更好的选择，也是唯一的选择@MShacki用这个设置了一个小提琴，但是所有的div内容都显示出来了吗？使用工作小提琴进行更新。您需要包括jQuery库、jQuery UI库和jQuery UI样式表。请参阅小提琴上的外部资源部分。