嵌套选项卡 - 第二个选项卡区默认状态（jquery）

Question

我在使用第二个标签区域时遇到了一些麻烦，就像我想要的那样。

单击主选项卡时，默认情况下不会显示嵌套选项卡的内容。

如果我的嵌套选项卡是主默认选项卡的一部分，那么它看起来不错，所以这让我觉得我的.click函数中缺少一些东西，但我无法理解它。

我正在寻找的是当点击标签2时，默认显示标签2-1的内容。

不确定我是否正在解释这一点，所以这里是一个JS小提琴：http://jsfiddle.net/ionko22/nTFH9/

我如何才能让嵌套标签正常工作？

这是我目前拥有的JS

$(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;
    });
     });

和我的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>