0

我使用动态驱动器标签内容创建任何标签内容。如果我有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 lazyload 插件可以提供帮助。这个问题的任何方法，方式/解决方案！？谢谢。

html:

<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>
4

2 回答 2

1

您是否考虑过使用JQuery UI Tabs插件？

它为几乎任何带有标签的任务提供了灵活而强大的解决方案。

于 2012-05-05T21:48:51.530 回答
0

因此，您想在用户单击选项卡时加载选项卡内容，对吗？如果这就是您想要做的，您可以将一个侦听器附加到链接元素，并在单击一个侦听器时将内容动态加载到选项卡内容区域中。

// 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')
        })
    }
})
于 2012-05-05T22:03:38.053 回答