javascript - Change DIV based on clicked TAB - Stack Overflow

admin管理员组

文章数量:1279148

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

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

• javascript
• jquery

Share Improve this question Follow edited Aug 5, 2015 at 2:02 vittore 17.6k66 gold badges4545 silver badges8484 bronze badges asked Jul 15, 2011 at 22:58 422422 5,7702424 gold badges8686 silver badges140140 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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 bees "tab1" instead of "#tab1"

You could use jQuery to do this: http://jsfiddle/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(); 
});

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');    
});

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.

本文标签： javascriptChange DIV based on clicked TABStack Overflow