0

動的ドライブのタブコンテンツを使用してタブ コンテンツを作成します。コンテンツがある場合、すべての div コンテンツ タブがすぐに読み込まれます4 tabs。4 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 に答える