实用的Jquery选项卡TAB示例代码
更新时间：2013年08月28日 14:53:01 作者：
Jquery选项卡想必大家并不陌生，本文为大家介绍个比较实用的jquery TAB选项卡，喜欢的朋友可以学习下
复制代码 代码如下:
<!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>
相关文章
下面小编就为大家带来一篇浅谈jQuery绑定事件会叠加的解决方法和心得总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这种绑定方法会在整个document每pageinit一次,就对xxx进行的某一事件进行绑定,而pageinit事件什么时候会触发，感兴趣的朋友可以了解下2013-09-09
这篇文章介绍了jquery ui dialog实现弹窗特效的思路及代码，有需要的朋友可以参考一下2013-08-08
有些时候需要根据浏览器来写样式，所以要判断一下浏览器类型，百度了一下，才知道JQuery有个方法直接判断，并附上原生的js的判断方法，分享给大家，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了基于EasyUI的基础之上实现树形功能菜单,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
使用javascript自带的提示对话框，不怎么美观，如果使用自定义的，那么在样式上就会有更多的控制权了，下面为大家分享下Jquery自定义的弹窗2014-03-03
这篇文章主要为大家详细介绍了jQuery过滤选择器经典应用，具有一定的实用性，感兴趣的小伙伴们可以参考一下2016-08-08
position方法获取匹配元素相对父元素的偏移。接下来通过本文给大家分享jQuery Position方法使用和兼容性的相关知识，感兴趣的朋友一起看看吧2017-08-08
从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求，对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则，下面的示例中添加了一个用于正则表达式验证的扩展验证的方法2011-09-09
本篇文章主要介绍了使用简洁的jQuery方法实现隔行换色功能。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论