<!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. 如何写SysV服务管理脚本

    本文目录: 1.1 SysV脚本的特性1.2 SysV脚本要具备的能力1.3 start函数分析1.4 stop函数分析1.5 reload函数分析1.6 status.restart.force-r ...

  2. Java运算符和流程控制

    1 运算符 1.1  比较运算符 比较运算符的结果都是boolean类型,也即是要么是true,要么是false. 比较运算符"=="不能写成"=". > ...

  3. 如何使用Git和码云Git@OSC

    1.Git简介 关于Git是什么,阅读博客Git简介 2.Git 基础 Git命令很多,常用命令如下图 Workspace:工作区 Index/Stage :暂存区 Local Repository: ...

  4. 扫雷游戏制作过程（C#描述）：第二节、界面设计

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 扫雷界面设计 界面的设计,首先需要创建一个菜单栏.具体方法在左边找到工具箱窗口,展开其中的菜单和工具栏,找到MenuStrip选项,双 ...

  5. 201521123005《java程序设计》第三周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.使用思维导图将这些碎片化的概念.知识组织起来.使用工具画出本周学习到的知识点. 参考资料: 百度脑图 XMind 2. 书面作业 ·Q ...

  6. 201521123033《Java程序设计》第1周学习总结

    1. 本周学习总结 (1)了解了JVM,JRE,JDK (2)配置java环境变量 (3)编译一些简单的java代码 2. 书面作业 为什么java程序可以跨平台运行?执行java程序的步骤是什么?( ...

  7. Python IDLE快捷键一览

    编辑状态时:Ctrl + [ .Ctrl + ] 缩进代码Alt+3 Alt+4 注释.取消注释代码行Alt+5 Alt+6 切换缩进方式 空格<=>TabAlt+/ 单词完成,只要文中出 ...

  8. Java课程设计——GUI密码生成器团队博客

    1.团队名称.团队成员介绍(需要有照片) 1.1团队名称 小黄人 1.2团队成员介绍 吴玲:组长,现任院就业会策划部副部长 郭琪容:组员,现任院硬件协会会长 2. 项目git地址 吴 玲 郭琪容 3. ...

  9. SpringMVC第三篇【收集参数、字符串转日期、结果重定向、返回JSON】

    业务方法收集参数 我们在Struts2中收集web端带过来的参数是在控制器中定义成员变量,该成员变量的名字与web端带过来的名称是要一致的-并且,给出该成员变量的set方法,那么Struts2的拦截器 ...

  10. [01] Servlet是什么

    1.Servlet是什么 Servlet(Server Applet),全称Java Servlet,是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 1.1 ...