1

I'm having a bit of trouble getting the the 2nd tabbed area to display like I'd like it to.

The content of my nested tabs doesn't show by default when the main tab is clicked.

If my nested tabs are part of the main default tab then it looks good, so this gets me thinking there's something missing in my .click function but I just can't figure it out.

What I'm looking for is when Tab 2 is clicked the content of tab 2-1 is displayed by default.

Not sure if I'm explaining this well so here's a JS Fiddle:http://jsfiddle.net/ionko22/nTFH9/

Any ideas how I can get the nested tabs working properly?

here's the JS I currently have 

$(document).ready(function(){
        $('.tab-content').not('.default').hide();   
        $('.tabs li').click(function() {
        $(this).parent().parent().find('.tab-content').hide();
        var selected_tab = $(this).find('a').attr('href');  
        $(selected_tab).show();     
        $(this).parent().find('li').removeClass('current');
        $(this).addClass('current');
        return false;
    });
     });

and my HTML:

<div class="tabs">
    <ul>
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
        <li><a href="#tab3">tab 3</a></li>     
    </ul>
  <div id="tab1" class="tab-content default">
   Tab 1 Content
  </div>

  <div id="tab2" class="tab-content">
    <div class="tabs">
      <ul>
        <li><a href="#tab21">tab 2 1</a></li>
        <li><a href="#tab22">tab 2 2</a></li>
        <li><a href="#tab23">tab 2 3</a></li>     
      </ul>
    <div id="tab21" class="tab-content default">
        Tab 2 1 Content
    </div>
    <div id="tab22" class="tab-content">
        Tab 2 2 Content
    </div>
    <div id="tab23" class="tab-content">
        Tab 2 3 Content
     </div>
    </div>  
  </div>

  <div id="tab3" class="tab-content">
   Tab 3 Content
 </div>

 </div>
4

0 回答 0