实用的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图片切换动画特效

    jQuery图片切换动画特效

    这篇文章主要为大家详细介绍了jQuery图片切换动画特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • jQuery搜索同辈元素方法

    jQuery搜索同辈元素方法

    这篇文章主要介绍了jQuery搜索同辈元素方法,实例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并给出了一个完整的实例进行了总结归纳,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 理解jquery事件冒泡

    理解jquery事件冒泡

    这篇文章主要介绍了jquery事件冒泡,以及如何阻止jQuery事件冒泡现象,感兴趣的朋友可以参考一下
    2016-01-01
  • JQuery调用绑定click事件的3种写法

    JQuery调用绑定click事件的3种写法

    这篇文章主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
    2015-03-03
  • 基于jquery实现图片放大功能

    基于jquery实现图片放大功能

    这篇文章主要为大家详细介绍了基于jquery实现图片放大功能的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • Jquery Easyui表单组件Form使用详解(30)

    Jquery Easyui表单组件Form使用详解(30)

    这篇文章主要为大家详细介绍了Jquery Easyui表单组件Form的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jquery scroll()区分横向纵向滚动条的方法

    jquery scroll()区分横向纵向滚动条的方法

    这篇文章主要介绍了使用jquery scroll()方法区分浏览器横向和纵向滚动条的方法,需要的朋友可以参考下
    2014-04-04
  • JQuery 将元素显示在屏幕的中央的代码

    JQuery 将元素显示在屏幕的中央的代码

    在网站开发中我们经常需要将对话框显示在屏幕的中央。如果使用Javascript因为浏览器实现的差异,实现起来非常麻烦。但是JQuery可以很简单实现的搞定这一切。
    2010-02-02
  • 基于jquery实现百度新闻导航菜单滑动动画

    基于jquery实现百度新闻导航菜单滑动动画

    这篇文章主要介绍了基于jquery实现百度新闻导航菜单滑动动画,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jQuery easyui datagrid动态查询数据实例讲解

    jQuery easyui datagrid动态查询数据实例讲解

    接下来将从前台提交查询条件,从MSSQL返回json数据的一个事例来讲解一下datagrid动态查询数据,感兴趣的你可不要错过了哈,希望本文可以帮助到你
    2013-02-02

最新评论