jQuery標簽內容幫助-1.4

Question

我一直在嘗試在我的網站上創建一些標簽，結果如下：

<ul class="tabContainer">
       <!--Tabs Here -->
    </ul>

    <div class="clear"></div>

    <div id="tabContent">
        <div id="contentHolder">
            <!-- The content goes here -->
        </div>
    </div>

現在，我已經看到使用了以下內容，但是我想知道是否有可能代替單個內容頁面來獲取單個div：

所以代替：

var Tabs = {
    'Music' : 'pages/page1.html',
    'DVD' : 'pages/page2.html'.
}

改用這個：

var Tabs = {
    'Music' : 'div#fragment-1',
    'DVD' : 'div#fragment-2'.
}

這可能嗎？ 還是我可以使用另一種解決方案來獲取內容？ 我只想要一個簡單的ish解決方案，在其中可以在2個選項卡之間切換，但是僅在JQuery 1.4中使用？

希望您能提供幫助，

蛇跨

Answer 1

您可以嘗試以下操作：

JS

$(function(){

function contentSwitcher(settings){
    var settings = {
       contentClass : '.content',
       navigationId : '#navigation'
    };

    //Hide all of the content except the first one on the nav
    $(settings.contentClass).not(':first').hide();
    $(settings.navigationId).find('li:first').addClass('active');

    //onClick set the active state, 
    //hide the content panels and show the correct one
    $(settings.navigationId).find('a').click(function(e){
        var contentToShow = $(this).attr('href');
        contentToShow = $(contentToShow);

        //dissable normal link behaviour
        e.preventDefault();

        //set the proper active class for active state css
        $(settings.navigationId).find('li').removeClass('active');
        $(this).parent('li').addClass('active');

        //hide the old content and show the new
        $(settings.contentClass).hide();
        contentToShow.show();
    });
}
contentSwitcher();
});

html

<div id="navigation">
  <ul class="tabbedContent">
<li><a href="#page1">link 1</a></li>
    <li><a href="#page2">link 2</a></li>
<li><a href="#page3">link 3</a></li>
<li><a href="#page4">link 4</a></li>    
    <li><a href="#page5">link 5</a></li>                                
   </ul>
</div>

<div id="page1" class="content">

</div>               
<div id="page2" class="content">

</div>               
<div id="page3" class="content">

    </div>

<div id="page4" class="content">

</div>
<div id="page5" class="content">

</div>
</div>

Answer 2

用下面的代碼替換從第31行到第43行的script.js –第2部分的代碼：

if(!element.data('cache'))
{
    var msg - $(element.data('page')).html()
    $('#contentHolder').html(msg);
    element.data('cache',msg);
}
else $('#contentHolder').html(element.data('cache'));

附帶說明一下..如果在現有代碼中包含jQuery UI沒什么大不了的話，為什么不使用jQuery UI提供的選項卡呢？