Jquery实现选项卡效果

$(document).ready(function(){

　　　　$('.ct:gt(0)').hide(); gt()　　//匹配所有大于给定索引值的元素

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

　　hdw.hover(function(){

　　　　$(this).addClass('two')
　　　　.siblings().removeClass('two'); // siblings() 找到所有与此标签同辈的元素

　　});

　　hdw.click(function(){

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

　　　　var hdw_index = hdw .index(this);　　　　　　　　　　　　//index搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

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

});

});
</script>

.box ul li.two { background:url(img/bg_3.png) repeat-x;}

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

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

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

</style>

<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>

</body>

Jquery实现选项卡效果

相关推荐