jQuery效果之选项卡一

最新推荐文章于 2022-06-09 19:11:55 发布

恒奇恒毅

最新推荐文章于 2022-06-09 19:11:55 发布

阅读量312

点赞数

分类专栏：网页开发

网页开发专栏收录该内容

94 篇文章 1 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.6.4.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>

恒奇恒毅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果之选项卡一

无标题文档$(document).ready(function(){ $('.ct:gt(0)').hide(); var hdw = $('.box ul li'); hdw.hover(function(){ $(this).addClass('two')
复制链接

扫一扫