实用的Jquery选项卡TAB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>实用的Jquery选项卡</title>  
<script language="javascript" type="text/javascript" src="jquery-1.9.1.min.js"></script>  
<style type="text/css">  
.order_box .stitle {  
    width: 825px;  
    clear: right;  
    height: 27px;  
    border-bottom: 2px solid #A10000;  
}  
.order_box .stitle .close {  
    width: 80px;  
    height: 18px;  
    border-top: 1px solid #dedede;  
    border-left: 1px solid #dedede;  
    border-right: 1px solid #dedede;  
    background: #f1f1f1;  
    color: #000;  
    text-align: center;  
    float: left;  
    margin-right: 5px;  
    padding-top: 8px;  
}  
.order_box .stitle .open {  
    width: 82px;  
    height: 20px;  
    background: #A10000;  
    color: #fff;  
    text-align: center;  
    float: left;  
    margin-right: 5px;  
    padding-top: 8px;  
    overflow: hidden;  
}  
.order_box ul li {  
    cursor: pointer;  
    display: list-item;  
    list-style:none;  
}  
</style>  
<script type="text/javascript">  
        //选项卡切换  
        $(function () {  
            $(".stitle li").click(function () {  
                var index_tab = $(this).parent().children().index($(this)); //选项卡的索引值       
                $(this).parent().find(".open").removeClass("open").addClass("close"); //选项卡背景处理  
                $(this).removeClass("close").addClass("open");  
                var content_obj = $(".cntorder")  //内容节点  
                content_obj.hide();  
                content_obj.eq(index_tab).show();  
            });  
        });  
</script>  
</head>  
<body>  
<div class="order_box">  
  <div class="stitle">  
    <ul>  
      <li class="open">进行中</li>  
      <li class="close">已完成</li>  
      <li class="close">无效</li>  
    </ul>  
  </div>  
  <div class="cntorder" >tab1</div>  
  <div class="cntorder" style="display: none;">tab2</div>  
  <div class="cntorder" style="display: none;">tab3</div>  
</div>  
</body>  
</html>

补充：web前端 , JavaScript ,