<!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. 基于AXI4总线卷积FPGA加速IP核的尝试

    本文先总结不同AXI IP核的实现的方法,性能的对比,性能差异的分析,可能改进的方面.使用的硬件平台是Zedboard. 不同的AXI总线卷积加速模块的概况 这次实现并逐渐优化了三个版本的卷积加速模块 ...

  2. 【Java IO流】对象的序列化和反序列化

    对象的序列化和反序列化 1)对象序列化,就是将Object对象转换成byte序列,反之叫对象的反序列化. 2)序列化流(ObjectOutputStream),是字节的过滤流—— writeObjec ...

  3. CRC与MD5的异同

    php中CRC32的用法: crc32 - 计算一个字符串的 crc32 多项式 生成 string 参数的 32 位循环冗余校验码多项式--: 这句话从英文翻译过来的,不正确,准确的说应该是这么理解 ...

  4. 【★】SPF(Dijkstra)算法完美教程

  5. 第二次作业：结对编程，四则运算的GUI实现

    小伙伴:201421123031 余洋 201421123044  潘志坚  题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是W ...

  6. 团队作业8——第二次项目冲刺（Beta阶段）--第七天

    会议照片: 燃尽图: 项目进展: 所有项目都已完成 进行app测试即使用情况评估 团队贡献比: 队员 角色 团队贡献比 陈麟凤 PM 17% 张志杰 DEV 18% 黄海鸿 TEST 16% 康建灿 ...

  7. 【Alpha】——Seventh Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 将项目做成APK 用户界面改善 郑靖涛 协助设计账目一览表板块 用户界面改善 杨海亮 查询功能测试 用户界 ...

  8. 如何设置Cookie 的值为中文的内容

    默认情况下,cookie的值是不允许中文内容的.可以借助于java.net.URLEncoder先对中文字符串进行编码,将编码后的结果设为cookie值.当程序要读取cookie值时,先读取,然后使用 ...

  9. 201521123059 《Java程序设计》第二周学习总结

    1.本周总结 本周老师讲了和自己掌握了以下内容: (1).三元条件运算符 表达式1?表达式2:表达式3: (2). 字符串String类 String的不可变优点:编译器可以让字符串共享,效率高.但是 ...

  10. 201521123006 《java程序设计》 第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) **1.2 ...