實用的Jquery選項卡TAB示例代碼

2024-05-06 15:51:16

字體：大中小

供稿：網(wǎng)友

Jquery選項卡想必大家并不陌生，本文為大家介紹個比較實用的jquery TAB選項卡，喜歡的朋友可以學(xué)習(xí)下

復(fù)制代碼代碼如下:

<!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") //內(nèi)容節(jié)點
content_obj.hide();
content_obj.eq(index_tab).show();
});
});
</script>
</head>
<body>
<div>
<div>
<ul>
<li>進(jìn)行中</li>
<li>已完成</li>
<li>無效</li>
</ul>
</div>
<div >tab1</div>
<div>tab2</div>
<div>tab3</div>
</div>
</body>
</html>