适用的Jquery选项卡TAB _Web前端

实用的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>