HTML组件：Tabs的实现

Tabs的每一页有一个标签项和一个内容项。如果不考虑其排列形式的话，与其最接近的HTML标签是定义列表dl。

<style>
  .tabs dt {
     display:inline-block;
     border:1px solid #cccccc;margin:0 1px 0 0;padding:3px 5px 0;
     background-color:#56f3f4
  }
  .tabs dd {
    display:none;
    border:1px solid silver;padding:1em;margin-left:0;
    background-color:#f3f456
  } 
</style>
  <dl class="tabs">
    <dt>Tab 1</dt>
    <dd>abc 1</dd>
    
    <dt>Tab 2</dt>
    <dd>abc 2</dd>
   
    <dt>Tab 3</dt>
    <dd>abc 3</dd>
  </dl>
  
  <script>
    $('dl.tabs').each(function(idx,dl){
      $('dd',dl).appendTo(dl).hide().filter(':first').show();
      $('dt',dl).click(function(){
        var n = $(this).prevAll('dt').length;
        $(this).nextAll('dd').hide().eq(n).show();
      });
    });
  </script>