~~~
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>
~~~
- 前言
- jQuery 變動圖片、濾鏡效果
- jQuery javaScript js 判斷瀏覽器的類型、版本的方法
- jQuery 設置表格隔行變色、隔列變色
- jQuery 可編輯表格文本域,支持鍵盤快捷操作
- jQuery 中常用的插件列表
- 共享你的jquery 插件
- extJS checkBoxColunmTree 可以選擇帶checkBox的樹(tree、grid)
- jquery tab 選項卡功能
- jQuery autocomplete 自擴展插件、自動補全示例
- jquery blockUI 擴展插件 Dialog
- jQuery 獲取屏幕高度、寬度
- JavaScript/jQuery、HTML、CSS 構建 Web IM 遠程及時聊天通信程序
- Web 通信 之 長連接、長輪詢(long polling)
- 幾款極好的 JavaScript 文件上傳插件
- 60款很酷的 jQuery 幻燈片演示和下載