lazyload动态驱动器内容标签

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