<!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选项卡TAB的更多相关文章

  1. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  2. jQuery选项卡tabulous

    jQuery选项卡tabulous,jQuery,选项卡,tab标签切换代码,扁平设计,jQuery选项卡tabulous是一款支持Scale.Slide.Scale Up.Flip等效果jquery ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  5. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  6. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  7. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  8. js和jquery实现tab选项卡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【转】25个非常实用的jQuery/CSS3应用组件

    今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...

随机推荐

  1. 基于NIOS-II的示波器：PART4 系统调试&测试

    本文记录了在NIOS II上实现示波器的第四部分. 本文主要包括:修改部分BUG,以及测试 本文所有的硬件以及工程参考来自魏坤示波仪,重新实现驱动并重构工程. version 1.0 界面修改& ...

  2. jquery 函数大全

    jquery函数大全转载  Attribute:$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”te ...

  3. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  4. [2017BUAA软工助教]评论汇总

    一 邹欣 周筠 飞龙 二 学校 课程 教师 助教1 助教2 助教3 福州 软件工程1715K 柯逍 谢涛 软件工程1715Z 张栋 刘乾 汪培侨 软件工程1715W 汪璟玢 曾逸群 卞倩虹 李娟 集美 ...

  5. 201521123061 《Java程序设计》第十一周学习总结

    201521123061 <Java程序设计>第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周学习的是如何解决多线程访问中的互斥 ...

  6. 201521123052《Java程序设计》第7周学习总结

    1. 本周学习总结 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Ob ...

  7. 201521123063 《JAVA程序设计》 第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 上周学习了继承和多态,满足is-a条件,但是发现会导致继承的滥用,如果只是但以的 ...

  8. 201521123039 《java程序设计》第十一周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有 ...

  9. [转载]iOS开发之手势识别

    感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...

  10. js转换字符串为数值的方法

    在js读取文本框或者其他表单数据的时候获得的值是字符串类型的,比如两个文本框a和b,假设获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,由于他们都是字符串形 ...