文档章节

实用的Jquery选项卡TAB

深圳大道
 深圳大道
发布于 2016/12/29 15:40
字数 255
阅读 0
收藏 0
<!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")  //内容节点
                content_obj.hide();
                content_obj.eq(index_tab).show();
            });
        });
</script>
</head>
<body>
<div class="order_box">
  <div class="stitle">
    <ul>
      <li class="open">进行中</li>
      <li class="close">已完成</li>
      <li class="close">无效</li>
    </ul>
  </div>
  <div class="cntorder" >tab1</div>
  <div class="cntorder" style="display: none;">tab2</div>
  <div class="cntorder" style="display: none;">tab3</div>
</div>
</body>
</html>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/10428079

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5.1K
5
分享 6 个实用的 jQuery 和 CSS 实例及源码

jQuery是一个十分轻巧方便的JS类库,有了这个强大的框架,我们的项目可以简化不少,今天给大家分享6个WEB项目中很可能会用上的jQuery实例及源码,希望大家喜欢。 1、jQuery幻灯片播放插件cov...

yykj
2012/12/07
8.3K
12
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
824
5
8 款极具表现力的jQuery/CSS3网页菜单

上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完...

yykj
2013/07/03
5.5K
16
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

读书笔记:深入理解ES6 (五)

第五章 解构:使数据访问更便捷 第1节 为什么使用解构功能?   在ES5中,开发者们从对象、数组中获取特定数据并赋值给变量,编写了很多看起来同质化的代码。例如: 1 let options = {2 ...

张森ZS
7分钟前
4
0
CentOS7 yum方式安装MySQL5.7

在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB。 1 下载并安装MySQL官方的 Yum Repository [root@localho...

roockee
15分钟前
4
0
Allegro三种自定义设置快捷键的方法

Allegro自定义设置快捷键的三种方法: 1、在Allegro PCB editor 命令窗口直接定义 2、通过修改用户变量env文件来设置快捷键 3、定义笔画为快捷键 1、在Allegro PCB editor 命令窗口直接定义 ...

demyar
20分钟前
3
0
如何做一张能让人眼前一亮的大屏?

作为在职场驰骋的社会人,提到数据可视化大家应该都不陌生了。数据可视化的作用也不用我多说,主要是利用图形化手段,更清晰直观地将数据展示。多层次、交互式的可视化分析能够方便决策者理解...

朕想上头条
20分钟前
3
0
TL138/1808/6748-EthEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EthEVM是广州创龙基于SOM-TL138/1808/6748核心板开发的一款开发板,具有三个网络接口。由于SOM-TL138/1808/6748核心板管脚兼容,所以此三个核心板共用同一个底板。开发板采用...

Tronlong创龙
25分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部