<!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. 为什么说汽车VIN码是汽车唯一的"身份证"

    人有身份证,那么车有吗?当然了,汽车也是有"身份证"的,出厂时就会跟着车辆一起出生, 一般在车辆的挡风玻璃处.按照国际SAE国际规定,Vin码由17位字符组成,其中包含了车辆的生产 ...

  2. 201521123091 《Java程序设计》第8周学习总结

    Java 第八周总结 第八周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集 ...

  3. 软件工程HW1-四则运算软件

    题目描述 程序自动生成小学四则运算题目,用户输入每道题的答案之后,将答错的题目标出并计算此次答题的正确率. 项目链接 我的项目 项目运行截图 个人软件过程 此次开发的四个步骤: 1):需求分析 2): ...

  4. 第二次作业——个人项目实战（Sudoku)

    Github:Sudoku 项目相关要求 利用程序随机构造出N个已解答的数独棋盘 . 输入 数独棋盘题目个数N 输出 随机生成N个 不重复 的 已解答完毕的 数独棋盘,并输出到sudoku.txt中, ...

  5. 201521123059 《Java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 1.Comparable与Arrays.sort,其功能是对指定对象数组按升序进 ...

  6. 杨晨露 Java 第一周总结

    1.学习内容总结 (1)Integer类在对象中包装了一个基本类型int的值.Integer类型的对象包含一个int类型的字段.该类提供了多个方法,能在int类型和String类型之间互相转换,还提供 ...

  7. Java-高效地使用Exception-实践

    注:本文翻译自Exceptional practices,共分为3节.该文章从实践的角度非常透彻地解释了为什么要处理异常,以及如何处理异常.这些都是那些只会介绍trycatchfinally语法的教材 ...

  8. 201521123048 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. 201521123113《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 返回的结果 ...

  10. php中获取当前系统时间、时间戳

    今天写下otime($time, $now)为将时间格式转为时间戳,$time为必填.清楚了这个,想了解更多,请继续往下看. 3. date($format)用法比如:echo date(‘Y-m-d ...