就是假如有 3条题目初始状态
题目一
题目二
题目三
点击题目一时显示题目一下显示对应的信息 其他信息隐藏
点击题目二时显示题目二下显示对应的信息 其他信息隐藏
点击题目三时显示题目三下显示对应的信息 其他信息隐藏就像题目一
内容一内容一内容一内容一内容一内容一内容一
题目二
题目三
题目一
题目二
内容二内容二内容二内容二内容二内容二内容二
题目三
题目一
题目二
题目三
点击题目一时显示题目一下显示对应的信息 其他信息隐藏
点击题目二时显示题目二下显示对应的信息 其他信息隐藏
点击题目三时显示题目三下显示对应的信息 其他信息隐藏就像题目一
内容一内容一内容一内容一内容一内容一内容一
题目二
题目三
题目一
题目二
内容二内容二内容二内容二内容二内容二内容二
题目三
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jqeryTab.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<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 {
border: 1px solid #CCCCFF;
width: 200px;
height: 200px;
}
.header {
height: 20px;
width: 100%;
}
.liStyle {
cursor: pointer;
height: 20px;
width: 64px;
-width: 62px;
float: left;
border: 1px solid #CCCCFF;
background-color: #CCFFFF;
}
.show {
background-color: red;
}
.hide {
background-color: #CCFFFF;
}
.ulHide {
display: none;
}
.ulShow {
display: block;
}
ul {
list-style: none outside none;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$(function () {
var ary = $("#tab > ul > li").click(function () {
$(this).parent().find("li.show").addClass("hide").removeClass("show");
$(this).addClass("show").removeClass("hide");
$("#tab > div > ul.ulShow").addClass("ulHide").removeClass("ulShow");
$("#tab > div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");
}).toArray();
});
</script>
</head>
<body>
<div id="tab">
<ul class="header">
<li class="liStyle show">Java</li>
<li class="liStyle">Spring</li>
<li class="liStyle">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>