<script type="text/javascript">

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

<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; background:url(img/bg_2.png) repeat-x; border:1px solid #A1AFB9; border-bottom:none; position:relative; cursor:pointer; margin-right:5px; }

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

.content { width: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>

</div>

</body>

Jquery实现选项卡效果的更多相关文章

  1. jquery之选项卡效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  3. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  5. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  7. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  8. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  9. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

随机推荐

  1. git命令记录

    1, clone 远程分支 git clone 命令默认的只会建立master分支,如果你想clone指定的某一远程分支(如:dev)的话,可以如下: A. 查看所有分支(包括隐藏的)  git br ...

  2. Redis 部署主从哨兵 C#使用,实现自动获取redis缓存 实例1

    源码示例下载链接: https://pan.baidu.com/s/1eTA63T4 密码: un96 实现目标:windows 下安装 一台master服务 一台salve redis服务器 并且哨 ...

  3. Redis随笔（四）Centos7 搭redis3.2.9集群-3主3从的6个节点服务

    1.虚拟机环境 使用的Linux环境已经版本: Centos 7   64位系统 主机ip: 192.168.56.180 192.168.56.181 192.168.56.182 每台服务器是1主 ...

  4. Lottie的使用

    一.简介 Lottie是Airbnb开源的一个面向IOS.Android.React Native的动画库,能分析Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样 ...

  5. Java眼中的XML--------文件读取

     XML 的初次邂逅 初次邂逅XML 如何进行XML文件解析前的准备工作 在Java程序中如何获取xml文件的内容 在Java程序中读取xml文件的过程也成为----解析xml文件 解析的目的:获取节 ...

  6. 如何给网站添加SSL证书（免费）

    上篇讲了如何将网站部署到服务器上,这篇就讲如何给网站添加SSL证书. 1.先到腾讯云ssl证书认证那里申请一个证书 2.DNS认证 3.下载解压nginx里面的文件 4. 在服务器上/www目录下创建 ...

  7. 如何调用sklearn模块做交叉验证

    终于搞明白了如何用sklearn做交叉验证!!! 一般在建立完模型之后,我们要预测模型的好坏,为了试验的可靠性(排除一次测试的偶然性)我们要进行多次测试验证,这时就要用交叉验证. sklearn中的s ...

  8. SPATRA的使用

    SPATRA是kali里的集成工具,可以自动化渗透测试 在命令行里键入:sparta即可进入 进去后单机左边空白处 输入你要进行渗透测试的IP 正在扫描中 点击bute可以进入hydra

  9. POJ3041-Asteroids-匈牙利算法

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23963   Accepted: 12989 Descr ...

  10. Codeforces__Raising Bacteria

    题目传送门:Raising Bacteria //问题描述:一个盒子里面放一个细菌在一天可以增生两个细菌. 现在已知盒子里面细菌的个数,问你最初放多少个细菌可以增生盒子里面的细菌数量 //输入:盒子中 ...