//鼠标移到上面是显示手型
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第四课 ?点击 _选项卡效果一
原文地址：https://www.cnblogs.com/durenniu/p/9471597.html