//鼠标移到上面是显示手型
cursor:pointer

jquery 的函数:

siblings //兄弟节点，同胞元素

:eq()选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。
语法
$(":eq(index)")
参数     描述
index     必需。规定元素的 index 值。

:gt选择器选取 index 值高于指定数的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之后的元素
语法
$(":gt(index)")
参数     描述
index     
必需。规定要选择的元素。
会选取 index 值大于指定数的元素。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<link rel="stylesheet" type="text/css" href="style/hdw.css"/>

	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

	<script type="text/javascript">

		$(document).ready(function(){

			$('.ct:gt(0)').hide();

			var hdw = $('.box ul li');

			hdw.hover(function(){

			$(this).addClass('two').siblings().removeClass('two');

			});

			hdw.click(function(){

				$(this).addClass('one').siblings().removeClass();

				var hdw_index = hdw.index(this);

				$('.ct').eq(hdw.index(this)).show().siblings().hide();

			});

		});

	</script>

	<style type="text/css">

		* { padding:0; margin:0;}

		body { font-size:12px; padding:100px;}

		ul { list-style-type:none;}

		.box ul { height:30px; line-height:30px;}

		.box ul li { float:left; padding:0 10px; position:relative; cursor:pointer; border:1px solid #000; margin-right:5px; border-bottom:none;}

		.box ul li.two { background:orange;}

		.content { width:325px; border:1px solid #000; padding:10px; height:100px;}

		* html .content { margin-top:-1px;}

		.box ul li.one { background:#fff;}

	</style>

</head>

<body>

	<div class="box">

		<ul>

			<li class="one">课程介绍</li>

			<li>报名流程</li>

			<li>常见问题</li>

		</ul>

		<div class="content">

		<div class="ct">随着移动互联网的兴起，互联网行业正向更加智能化的Web3.0时代迈进，中国互联网行业进入了高速发展的势态，PHP语言已经为大部分企业广泛应用和重视（如：新浪、百度、腾讯、TOM、淘宝、搜狐、网易等）PHP语言是各大IT公司首选的互联网编程语言。PHP开发优势明显，未来发展空间巨大，IT行业急需PHP开发人才。 </div>

		<div class="ct">这里有后盾名学员对后盾网视频的评价,来后盾培训是你一生不悔的选择.用一个比喻来讲:后盾网实训课程不光是教你怎样开汽车,更是传授你如何制造汽车的技能.让学员自己能开发一个完整的框架产品,从深层次上掌握PHP的应用,这是后盾独有的。 </div>

		<div class="ct">PHP主讲老师具有多年项目开发经验及企业培训经验，打造企业需要的人才. 就业老师提供给学员职业素质、职业经验、职业技能等全方位就业指导。 </div>

		</div>

	</div>

</body>

</html>

　　

jQuery第四课 点击 _选项卡效果一的更多相关文章

  1. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  2. Jquery第四课 Javascript中this的使用方法

    thiskeyword的使用 在JavaScript中使用thiskeyword表示调用方法的对象,这与大部分面向对象语言是一样的.可是因为call.apply.bind等函数的影响.我们能够改变th ...

  3. jQuery实现点击式选项卡

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  4. 制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还

    查看本章节 查看作业目录 需求说明: 制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他 ...

  5. 【C语言探索之旅】 第一部分第四课第二章：变量的世界之变量声明

    内容简介 1.课程大纲 2.第一部分第四课第二章:变量的世界之变量声明 3.第一部分第四课第三章预告:变量的世界之显示变量内容 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布 ...

  6. 【C语言探索之旅】 第一部分第四课第一章：变量的世界之内存那档事

    内容简介 1.课程大纲 2.第一部分第四课第一章:变量的世界之内存那档事 3.第一部分第四课第二章预告:变量的世界之声明变量 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答 ...

  7. 【C语言探险】 第四课的第二部分：串

    内容简单介绍 1.课程大纲 2.第二部分第四课: 字符串 3.第二部分第五课预告: 预处理 课程大纲 我们的课程分为四大部分,每个部分结束后都会有练习题,并会发布答案.还会带大家用C语言编写三个游戏. ...

  8. 【Linux探索之旅】第一部分第四课：磁盘分区，并完成Ubuntu安装

    内容简介 1.第一部分第四课:磁盘分区,并完成Ubuntu安装 2.第一部分第五课预告:Unity桌面,人生若只如初见 磁盘分区 上一课我们正式开始安装Ubuntu了,但是到了分区的那一步,小编却戛然 ...

  9. 【C语言探索之旅】 第二部分第四课：字符串

    内容简介 1.课程大纲 2.第二部分第四课: 字符串 3.第二部分第五课预告: 预处理 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. ...

随机推荐

  1. Python中int，bool，str，格式化，少量is，已经for循环练习

    1.整数 ​ 十进制转化为二进制 ​ xxx.bit_length(). #求十进制数转化成二进制时所占用的位数 2.布尔值 ​ bool # 布尔值 - - 用于条件使用 ​ True 真 ​ Fa ...

  2. LeetCode Golang 7. 整数反转

    7. 整数反转 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. Tips : Math包给出的类型大小的边界: // Integer limit values. const ...

  3. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  4. CefSharp获取页面Html代码的两种方式

    CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...

  5. Hive学习：Hive连接JOIN用例详解

    1 准备数据: 1.1 t_1 01 张三 02 李四 03 王五 04 马六 05 小七 06 二狗 1.2 t_2 01 11 03 33 04 44 06 66 07 77 08 88 1.3 ...

  6. 2019-03-18 OpenCV Tesseract-OCR 下载 安装 配置（cv2 报错）

    OpenCV 下载 安装 配置 1.下载和Python版本对应的版本,此为下载地址 2.安装(在powershell管理员模式下安装) pip3 install .\opencv_python-3.4 ...

  7. 关于使用动态语言运行时 (. net)

    AutoCAD Managed .NET API允许您使用使用. NET 4.0 引入的动态语言运行时 (DLR). 使用DLR可以直接访问对象, 而无需: 打开一个对象进行读取或写入, 然后在完成后 ...

  8. 【codeforces 452D】Washer, Dryer, Folder

    [题目链接]:http://codeforces.com/problemset/problem/452/D [题意] 洗衣服有3个步骤,洗,干,叠; 有对应的3种洗衣机,分别有n1,n2,n3台,然后 ...

  9. NYIST 677 碟战

    碟战时间限制:2000 ms | 内存限制:65535 KB难度:4 描述知己知彼,百战不殆!在战争中如果被敌人掌握了自己的机密,失败是必然的.K国在一场战争中屡屡失败,就想到自己的某些城市可能会有敌 ...

  10. [Ubuntu]安装中文输入法

    安装了英文版的Ubuntu12.04之后.使用ctrt+space无法切换到中文,才反应过来. 于是查询了下怎么在Ubuntu下安装和配置中文输入法. 第一步安装语言包: 在左側的菜单条中点击 sys ...