符合web标准的tab标签切换

优点：
        符合现在流行的web标准。结构、样式、行为三者实现真正的分离。

/*结构-html*/

<div id="box">

    <ul id="tab">

      <li class="on">Home</li>

      <li>Product</li>

      <li>About</li>

    </ul>

    <ul id="tab_con">

      <li>Home Content</li>

      <li class="off">Product Content</li>

      <li class="off">About Content</li>

    </ul>

</div>

/*样式-css*/

<style type="text/css">

  #box{padding: 20px;font-size:12px}

  #box ul{margin:0;padding:0;list-style:none}

  #tab{height:25px; padding-left: 10px;border-bottom:1px solid #aacbee; }

  #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}

  #tab li:hover{color:#ca4e00; font-weight:bold;}

  #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px; color:#CA4E00; font-weight:bold;}

  #tab_con{border-top:none;padding:10px 20px 20px 20px;}

  #tab_con .off{display:none;} 

</style>

/*行为-js*/

<script type="text/javascript">

    $(function(){

      $("#tab li").click(function(){

          var idx=$("#tab li").index(this);

          $(this).addClass("on").siblings().attr("class","");

          $("#tab_con").children(":eq("+idx+")").show().siblings().hide();

      })

    })    

</script>