0

私は自分のウェブサイトにいくつかのタブを作成しようとしてきました、ここにそれが行きます：

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

これは可能ですか？または、コンテンツを取得するために使用できる別のソリューションはありますか？2つのタブのコンテンツを切り替えることができるシンプルなishソリューションが必要ですが、JQuery 1.4でのみ使用できますか？

あなたが助けることができることを願っています、

スネークスパン

4

2 に答える 2

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>
于 2012-07-03T15:50:14.390 に答える
0

script.js –パート2の31行目から43行目までのコードを次のコードに置き換えます。

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を含めることが大したことではない場合は、jQueryUIが提供するタブを使用してみませんか。

于 2012-07-03T15:57:07.323 に答える