Question

I’ve been trying to create some tabs on my website, here it goes:

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

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

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

Now, i’ve seen the following used, but I was wondering if it was possible, instead of individual pages of content, to get individual divs instead:

so instead of:

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

use this instead:

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

Is this possible? Or is there another solution I can use to get the content somehow? I just want a simple ish solution where I can switch between 2 tabs of content, but for use in JQuery 1.4 only?

Hope you can help,

Snakespan

Answer 1

you could try something like the following:

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>