Change DIV based on clicked TAB
<p>I am doing a leaderboard for a website we are working on.</p>

<p>Essentially, we have a div with this months winner for location A</p>

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

<p>Location A
Location B
etc etc</p>

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

<p>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.</p>

<p>So the content div is like:</p>

<pre><code>&lt;div id="???"&gt; content goes here &lt;/div&gt;
</code></pre>

<p>The tabs are like:</p>

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

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

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

<pre><code>&lt;div id="tab1"&gt; content goes here &lt;/div&gt;
&lt;div id="tab2"&gt; content goes here &lt;/div&gt;
&lt;div id="tab2"&gt; content goes here &lt;/div&gt;
</code></pre>

<p>And set visibility hidden to the divs.. any help appreciated.</p>

<p><em><strong></em>***<em></strong> ADDED INFO <strong></em>**<em>*</em>****</strong></p>

<p>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</p>

<p>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...</p>

<p>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</p>
