<!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. Spring集成RabbitMQ-连接和消息模板

    ConnectionFactory ConnectionFactory是RabbitMQ服务掌握连接Connection生杀大权的重要组件 有了它,就可以创建Connection(org.spring ...

  2. macOS上的ODBC-利用unixODBC连接PostgreSQL与SQLite并进行数据迁移

    安装UnixODBC & PSQLODBC driver for UnixODBC $ brew install psqlodbc Updating Homebrew... ==> In ...

  3. 201521123035《Java程序设计》第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代 ...

  4. 201521123017 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  5. 201521123103 《java学习笔记》 第十周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 二.书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学 ...

  6. python并发编程之协程

    ---恢复内容开始--- 一.join方法 (1)开一个主线程 from threading import Thread,currentThread import time def walk(): p ...

  7. java类成员变量与代码块初始化

    首先根据下面的这个一段代码:引入关于java初始化顺序的问题public class InitationTest extends Person { public InitationTest() { S ...

  8. could not get next sequence value

    1.触发事件 在电脑A上敲项目代码,数据库原始资料是直接使用别人写好的sql导入(建表和导入表数据等): 将电脑A上数据库的资料,使用PL/SQL Developer导出项目中所用表(此时未导出Ora ...

  9. 接口测试入门（3）--使用httpClient进行登录用例操作/set-cookies验证/ List<NameValuePair>设置post参数/json解析

    (最近学的都是很基础的接口测试,都是基于UI界面可见的接口,就是发请求,接收响应,分析返回的结果,校验,对共通模块进行封装,仅此而已,其实做自动化的思路基本都是如此,UI也是.) 现在开始用httpC ...

  10. springmvc04-文件上传-JSON数据

    文件上传部分: 1, 导入commons-fileupload-1.2.2.jar commons-io-2.4.jar 两个jar包. 2, 在主配置文件中,添加如下信息 <!-- 文件上传- ...