实用的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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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 filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Django 用户认证组件使用详解
2019/07/23 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
业绩考核岗位职责
2014/02/01 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
元旦促销方案
2014/03/15 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
交流会主持词
2015/07/02 职场文书
入队仪式主持词
2015/07/04 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server