实用的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 相关文章推荐
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
vue中路由跳转不计入history的操作
Sep 21 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正则提取或替换img标记属性
2013/06/26 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
php内嵌函数用法实例
2015/03/20 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
总结Python中逻辑运算符的使用
2015/05/13 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python for i in range ()用法详解
2020/09/18 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python netmiko模块的使用
2020/02/14 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
医学护理系毕业生求职信
2013/10/01 职场文书
师范生实习自我鉴定
2013/11/01 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS