实用的Jquery选项卡TAB示例代码


Posted in Javascript onAugust 28, 2013
<!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>
Javascript 相关文章推荐
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 #Javascript
JQuery筛选器全系列介绍
Aug 27 #Javascript
HTML Color Picker(js拾色器效果)
Aug 27 #Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 #Javascript
javascript:void(0)使用探讨
Aug 27 #Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
You might like
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python3遍历目录树实现方法
2015/05/22 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
家长通知书家长评语
2014/04/17 职场文书
大学活动总结模板
2014/07/10 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python