选项卡tab页jquery实现
来源：互联网 发布：网络兼职哪个网站好 编辑：程序博客网 时间：2024/04/30 12:27
<!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>
<title>tab选项卡，jQuery实现</title>
<style type="text/css">
* {margin:0;padding:0;}
dl {width:50%;margin:100px auto;}
dt {background:#F1F1F1;}
dt a {display:inline-block;padding:10px;text-decoration:none;color:#000;zoom:1;}
dt a:hover {text-decoration:underline;}
dl dd {display:none;background:#dedede;min-height:100px;}
a.active {background:#F60;}
dd.active {display:block;background:#ccc;}
</style>
</head>
<body>
<dl id="tab">
<dt>
<a href="#tab1" class="active">选项1</a>
<a href="#tab2">选项2</a>
<a href="#tab3">选项3</a>
</dt>
<dd id="content1" class="active">内容1</dd>
<dd id="content2">内容2</dd>
<dd id="content3">内容3</dd>
</dl>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery-1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabContainer = $('dl#tab'),
anchorCotainer = $('dl>dt'),
anchor = anchorCotainer.children('a'),
container = tabContainer.children('dd'),
index;
anchorCotainer.delegate('a','click',function(){
index = anchor.index(this);
$(this).addClass('active').siblings().removeClass('active');
container.eq(index).show().addClass('active').siblings('dd').hide().removeClass('active');
})
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tab选项卡，jQuery实现</title>
<style type="text/css">
* {margin:0;padding:0;}
dl {width:50%;margin:100px auto;}
dt {background:#F1F1F1;}
dt a {display:inline-block;padding:10px;text-decoration:none;color:#000;zoom:1;}
dt a:hover {text-decoration:underline;}
dl dd {display:none;background:#dedede;min-height:100px;}
a.active {background:#F60;}
dd.active {display:block;background:#ccc;}
</style>
</head>
<body>
<dl id="tab">
<dt>
<a href="#tab1" class="active">选项1</a>
<a href="#tab2">选项2</a>
<a href="#tab3">选项3</a>
</dt>
<dd id="content1" class="active">内容1</dd>
<dd id="content2">内容2</dd>
<dd id="content3">内容3</dd>
</dl>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery-1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabContainer = $('dl#tab'),
anchorCotainer = $('dl>dt'),
anchor = anchorCotainer.children('a'),
container = tabContainer.children('dd'),
index;
anchorCotainer.delegate('a','click',function(){
index = anchor.index(this);
$(this).addClass('active').siblings().removeClass('active');
container.eq(index).show().addClass('active').siblings('dd').hide().removeClass('active');
})
});
</script>
</body>
</html>
- 选项卡tab页jquery实现
- jquery 实现简单tab选项卡效果
- jquery 实现tab选项卡功能
- jquery简单实现tab选项卡效果
- jquery简单实现tab选项卡效果
- jquery简单实现tab选项卡效果
- 选项卡实现Tab
- jquery tab 选项卡功能
- jquery tab 选项卡功能
- AJAX jQuery tab选项卡
- JQuery tab 选项卡插件
- jquery tab选项卡切换
- jQuery-ui tab选项卡
- JQuery tab 选项卡插件
- jquery通用tab选项卡
- jQuery滑动tab选项卡
- jquery实现tab标签选项卡自动切换效果
- jQuery实现Tab，滑动门，选项卡，图片切换
- window.open遇到的问题的详细解说
- USB驱动程序代码分析——鼠标用作键盘
- vi 一些常用命令
- PS快捷键
- linux块设备基础知识（来源于国嵌）
- 选项卡tab页jquery实现
- 编写一个程序，开启3个线程，这3个线程的ID分别为A、B、C，每个线程将自己的ID在屏幕上打印10遍，要求输出结果必须按ABC的顺序显示；如：ABCABC….依次递推。
- gtest安装
- c# 获取字符串中的数字
- 块设备驱动程序框架
- PCA人脸识别
- The Destroy/Create Cycle of Activities
- 写一函数，取汉字
- 块设备驱动程序分析之框架构建
