实用的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>

相关文章

  • qTip 基于JQuery的Tooltip插件[兼容性好]

    qTip 基于JQuery的Tooltip插件[兼容性好]

    qTip是一个实现圆角对话气泡框样式的Tooltip jQuery插件。支持多种浏览器,可定制,功能强大。
    2010-09-09
  • 基于jQuery实现的美观星级评论打分组件代码

    基于jQuery实现的美观星级评论打分组件代码

    这篇文章主要介绍了基于jQuery实现的美观星级评论打分组件代码,涉及jQuery回调函数及页面元素属性动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • jQuery实现的简单日历组件定义与用法示例

    jQuery实现的简单日历组件定义与用法示例

    这篇文章主要介绍了jQuery实现的简单日历组件定义与用法,结合实例形式详细分析了基于jQuery扩展实现日历功能的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • $.extend 的一个小问题

    $.extend 的一个小问题

    本文给大家记录的是个人在使用$.extend 的时候遇到的一个小问题,以及原因分析和解决方案,十分的实用,有需要的小伙伴可以参考下。
    2015-06-06
  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作

    下面小编就为大家带来一篇浅谈jQuery 选择器和dom操作。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery 技巧小结

    jQuery 技巧小结

    jQuery 技巧,以前发布了很多了,具体的可以参考脚本之家以前发布的文章。
    2010-04-04
  • jquery禁用右键单击功能屏蔽F5刷新

    jquery禁用右键单击功能屏蔽F5刷新

    这篇文章主要介绍了jquery禁用右键单击功能屏蔽F5刷新的具体实现,需要的朋友可以参考下
    2014-03-03
  • 实例代码讲解jquery easyui动态tab页

    实例代码讲解jquery easyui动态tab页

    这篇文章主要介绍了实例代码讲解jquery easyui动态tab页的相关资料,需要的朋友可以参考下
    2015-11-11
  • jQuery实现的分子运动小球碰撞效果

    jQuery实现的分子运动小球碰撞效果

    这篇文章主要介绍了jQuery实现的分子运动小球碰撞效果,涉及jQuery基于定时函数操作页面元素动态变换的技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery事件详解

    jQuery事件详解

    本文主要介绍了jQuery事件的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论