延迟加载动态驱动器内容选项卡

lazyload dynamic drive content tabs

本文关键字：选项 动态 驱动器 延迟加载      更新时间：2023-09-26

我使用动态驱动器标签内容创建任何标签内容。 如果我有4 tabs和4 div内容，则所有div 内容选项卡都会立即加载。 这并不有趣。 在行动中，更好的方式：load first tabs 1 (div content1) then tabs 2 (div content2) then tabs 3 (div content3) then tabs 4 (div content4)。 我认为jquery延迟加载插件可以提供帮助。 这个问题的任何方法，方式/解决方案！？ 谢谢。

目录：

<ul id="flowertabs" class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>

JS来源：这里

<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>

你有没有想过使用 JQuery UI Tabs 插件？

它为几乎所有带有选项卡的任务提供了灵活而强大的解决方案。

所以你想在用户单击标签时加载选项卡内容，对吗？如果这是您想要执行的操作，您可以将侦听器附加到链接元素，并在单击一个侦听器时动态加载内容到选项卡内容区域。

// Example using jQuery
var urls = {
    'tcontent1': 'url-to-content-1'
  , 'tcontent2': 'url-to-content-2'
  , 'tcontent3': 'url-to-content-3'
  , 'tcontent4': 'url-to-content-4'
}
$('#flowertabs a').on('click', function() {
    var tabContentId = this.attr('del')
    if (this.attr('loaded') !== undefined) {
        $.ajax(urls[tabContentId]).done(function(html) {
            $('#' + tabContentId).html(html).attr('loaded','loaded')
        })
    }
})
相关文章：