根据单击的 TAB 更改 DIV

Question

I am doing a leaderboard for a website we are working on.

Essentially, we have a div with this months winner for location A

Below we have ajax tabs, where user can click tabs which relate to locations, like:

Location A Location B etc etc

So by default, when page loads, tab A is open. And the div above we need to give a matching ID, because...

I want as the user clicks tab B for the div above to change, with different DIV ID. So basically we can change content in the div based on the tab the user clicks.

So the content div is like:

<div id="???"> content goes here </div>

The tabs are like:

<ul class="tabs"> 
                    <li><a href="#tab1"><span class="stateTab">NSW</span></a></li> 
                    <li><a href="#tab2"><span class="stateTab">QLD</span></a></li> 
                    <li><a href="#tab3"><span class="stateTab">VIC</span></a></li> 
                    <li><a href="#tab4"><span class="stateTab">SA</span></a></li> 
                    <li><a href="#tab5"><span class="stateTab">WA</span></a></li> 
                    <li><a href="#tab6"><span class="stateTab">ACT</span></a></li> 
                    <li><a href="#tab7"><span class="stateTab">NT</span></a></li> 
                    <li><a href="#tab8"><span class="stateTab">TAS</span></a></li>
                    <li><a href="/leaderboard/australia/"><span class="stateTab">AUSTRALIA</span></a></li>
                </ul> 

So if user clicks #tab2 then a different DIV loads into the div id="???".

I think its fairly simple, just cannot figure it out. I realise I possibly have to set all the divs up, like so:

<div id="tab1"> content goes here </div>
<div id="tab2"> content goes here </div>
<div id="tab2"> content goes here </div>

And set visibility hidden to the divs.. any help appreciated.

*** ADDED INFO** * ****

The tabs, onclick ( presently ) display content from dataTables. So obviously when we click on tab1, the content below the tabs, shows the content fetched from our dataTables, in a div with id1

The issue now is, with wanting to change the content ABOVE the tabs aswell as the content BELOW the tabs... the 2 id's are conflicting, and one shows and one hides...

The TABS also change content below them, presumably we need to chain the id actions somehow, to get two sets of content to change in harmony

Answer 1

Set it up the way you planned in HTML adding style="display: none" to each div except the one you want to show by default. Then add to you javascript (at the bottom, or in $(function(){ //Document ready });

$('.tabs a').click(function(){
        $('div[id^=tab]').hide();
        $(this.href).show();
        return false;
    }
);

As for your Update, you can change your divs to have a class instead of an id. Like Content Above 1 Content Above 2

Tabs

 <div class="tab1 tabContent">Content Below 1</div>
 <div class="tab2 tabContent">Content Below 2</div>

Then you can change the javascript:

$('.tabs a').click(function(){
        $('div.tabContent').hide();
        $('div.'+this.href).show();
        return false;
    }
);

You'll also need to remove the hashes from your anchors, so the href becomes "tab1" instead of "#tab1"

Answer 2

You could use jQuery to do this: http://jsfiddle.net/YQdQm/

Not sure if this meets your requirements exactly (also, haven't yet tested on IE).

var tabs = $('div[id^=tab]');
tabs.hide();
$('#tab1').show();
$('.tabs a').click(function () {
    var tab_id = $(this).attr('href'); 
    tabs.hide();
    $(tab_id).show(); 
});

Answer 3

I would suggest use existing tab control from jquery UI

however if not you will need markup like that

<div class='tabs'>
<ul>
<li data-id='tab1'>tab 1</li>
....
</ul>
<div id='tab1'></div>
<div id='tab2' class='expanded'></div>
...
</div>

and code

$('.tabs ul li').bind('click',function() {
    var id = $(this).data('id');
    $('.tabs div').removeClass('expanded');
    $('#'+id).addClass('expanded');    
});

Answer 4

I know this is a bit brute force, but I like to do it this way:

JS:

    function hidetabs(){
     $("#tab1").hide();
     $("#tab2").hide();
     //And so on
    }

   function shobwtab(id){ 
    $("#"+id).show();
      hidetabs();
   }

HTML:

   <li><a href="#tab1" onClick="showtab('tab1')"><span class="stateTab">NSW</span></a></li>

Of course you could also add click listeners in your docready function to run the functions instead of using onClick.