Question

我使用dynamic drive tabs content创建任何标签内容。如果我有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 plugin可以提供帮助。这个问题的任何方法，方法/解决方案！？感谢。

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来源：HERE

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

Answer 1

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

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

Answer 2

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

// 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')
        })
    }
})

lazyload动态驱动器内容选项卡

2 个答案: