jquery tab 选项卡
jquery选项卡，带css样式的。支持ajax更新内容、页面同时出现多个tab选项卡而不影响其他选项卡内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery tab 选项卡</title>
<meta http-equiv="author" content="hoojo">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.tab {
background-color: mintcream;
width: 200px;
-width: 205px;
height: 200px;
margin-left: 200px;
}
.header {
height: 20px;
width: 100%;
}
.content {
border: 1px solid #CCCCFF;
border-top: none;
height: 180px;
}
.liStyle {
cursor: pointer;
height: 20px;
width: 66px;
-width: 61px;
float: left;
background-color: white;
}
.show {
background-color: mintcream;
border: 1px solid #CCCCFF;
border-bottom: none;
}
.hide {
background-color: white;
border-bottom: 1px solid #CCCCFF;
}
.ulHide {
display: none;
}
.ulShow {
display: block;
}
ul {
list-style: none outside none;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$(function () {
$(".tab > ul.header > li").click(function () {
$(this).parent().find("li.show").addClass("hide").removeClass("show");
$(this).addClass("show").removeClass("hide");
var parentsEl = $(this).parents(".tab");
parentsEl.find("div > ul.ulShow").addClass("ulHide").removeClass("ulShow");
/*页面静态内容*/
var ary = parentsEl.find("ul.header > li");
parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");
/*用ajax动态加载内容
parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {
var el = this;
$.post("TreeDataServlet", {param: "params"}, function (data) {
$(el).html(data);
});
return "ulShow";
}).removeClass("ulHide");*/
})
});
</script>
</head>
<body bgcolor="white">
<div class="tab">
<ul class="header">
<li class="liStyle show">Java</li>
<li class="liStyle hide">Spring</li>
<li class="liStyle hide">Hibernate</li>
</ul>
<div class="content">
<ul class="ulShow">
Java
<li>java javaSE</li>
<li>java javaME</li>
<li>java javaEE</li>
</ul>
<ul class="ulHide">
Spring
<li>java springMVC</li>
<li>java spring aop</li>
<li>java spring Ioc DI</li>
</ul>
<ul class="ulHide">
Hibernate
<li>java Hibernate Configuration Transaction</li>
<li>java Hibernate Query Criteria</li>
<li>java Hibernate Session SessionFactory</li>
</ul>
</div>
</div>
<hr/>
<div class="tab">
<ul class="header">
<li class="liStyle show">Java</li>
<li class="liStyle hide">Spring</li>
<li class="liStyle hide">Hibernate</li>
</ul>
<div class="content">
<ul class="ulShow">
Java....
<li>java javaSE</li>
<li>java javaME</li>
<li>java javaEE</li>
</ul>
<ul class="ulHide">
Spring....
<li>java springMVC</li>
<li>java spring aop</li>
<li>java spring Ioc DI</li>
</ul>
<ul class="ulHide">
Hibernate....
<li>java Hibernate Configuration Transaction</li>
<li>java Hibernate Query Criteria</li>
<li>java Hibernate Session SessionFactory</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery tab 选项卡</title>
<meta http-equiv="author" content="hoojo">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.tab {
background-color: mintcream;
width: 200px;
-width: 205px;
height: 200px;
margin-left: 200px;
}
.header {
height: 20px;
width: 100%;
}
.content {
border: 1px solid #CCCCFF;
border-top: none;
height: 180px;
}
.liStyle {
cursor: pointer;
height: 20px;
width: 66px;
-width: 61px;
float: left;
background-color: white;
}
.show {
background-color: mintcream;
border: 1px solid #CCCCFF;
border-bottom: none;
}
.hide {
background-color: white;
border-bottom: 1px solid #CCCCFF;
}
.ulHide {
display: none;
}
.ulShow {
display: block;
}
ul {
list-style: none outside none;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$(function () {
$(".tab > ul.header > li").click(function () {
$(this).parent().find("li.show").addClass("hide").removeClass("show");
$(this).addClass("show").removeClass("hide");
var parentsEl = $(this).parents(".tab");
parentsEl.find("div > ul.ulShow").addClass("ulHide").removeClass("ulShow");
/*页面静态内容*/
var ary = parentsEl.find("ul.header > li");
parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");
/*用ajax动态加载内容
parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {
var el = this;
$.post("TreeDataServlet", {param: "params"}, function (data) {
$(el).html(data);
});
return "ulShow";
}).removeClass("ulHide");*/
})
});
</script>
</head>
<body bgcolor="white">
<div class="tab">
<ul class="header">
<li class="liStyle show">Java</li>
<li class="liStyle hide">Spring</li>
<li class="liStyle hide">Hibernate</li>
</ul>
<div class="content">
<ul class="ulShow">
Java
<li>java javaSE</li>
<li>java javaME</li>
<li>java javaEE</li>
</ul>
<ul class="ulHide">
Spring
<li>java springMVC</li>
<li>java spring aop</li>
<li>java spring Ioc DI</li>
</ul>
<ul class="ulHide">
Hibernate
<li>java Hibernate Configuration Transaction</li>
<li>java Hibernate Query Criteria</li>
<li>java Hibernate Session SessionFactory</li>
</ul>
</div>
</div>
<hr/>
<div class="tab">
<ul class="header">
<li class="liStyle show">Java</li>
<li class="liStyle hide">Spring</li>
<li class="liStyle hide">Hibernate</li>
</ul>
<div class="content">
<ul class="ulShow">
Java....
<li>java javaSE</li>
<li>java javaME</li>
<li>java javaEE</li>
</ul>
<ul class="ulHide">
Spring....
<li>java springMVC</li>
<li>java spring aop</li>
<li>java spring Ioc DI</li>
</ul>
<ul class="ulHide">
Hibernate....
<li>java Hibernate Configuration Transaction</li>
<li>java Hibernate Query Criteria</li>
<li>java Hibernate Session SessionFactory</li>
</ul>
</div>
</div>
</body>
</html>
