Jquery实现选项卡效果
<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实现选项卡效果的更多相关文章
- jquery之选项卡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
随机推荐
- Python网络编程篇之socket
1 socket 插座?呵呵,想多了,翻译过来意思是套接字! A network socket is an internal endpoint for sending or receiving dat ...
- 【转载】在Linux下，一个文件也有三种时间，分别是：访问时间、修改时间、状态改动时间
在windows下,一个文件有:创建时间.修改时间.访问时间.而在Linux下,一个文件也有三种时间,分别是:访问时间.修改时间.状态改动时间. 两者有此不同,在Linux下没有创建时间的概念,也就是 ...
- TLD算法概述--学习理解之（一）
liuyihai@126.com http://www.cnblogs.com/liuyihai/ TLD(Tracking-Learning-Detection)是英国萨里大学的一个捷克籍博士生Zd ...
- Gym 100952A&&2015 HIAST Collegiate Programming Contest A. Who is the winner?【字符串，暴力】
A. Who is the winner? time limit per test:1 second memory limit per test:64 megabytes input:standard ...
- c++(单向链表)
有的时候,处于内存中的数据并不是连续的.那么这时候,我们就需要在数据结构中添加一个属性,这个属性会记录下面一个数据的地址.有了这个地址之后,所有的数据就像一条链子一样串起来了,那么这个地址属性就起到了 ...
- SpringMVC框架学习笔记（1）——HelloWorld
搭建SpringMVC框架 1.添加jar包 jsp-api.jar servlet-api.jar jstl.jar commons-logging-1.1.1.jar spring-beans-4 ...
- 详解用em替换px
em 的实际大小是相对于其上下文的字体大小而言的.如果我们给<body>标签设置文字大小为 100%,给其他文字都使用相对单位 em,那这些文字都会受body 上的初始声明的影响.这样做的 ...
- Thinkphp+Nginx(PHPstudy)下报的404错误,403错误解决
最近一个TP5的项目说放到Nginx下测试看看,下载个 PHPstudy,放到WWW下,配置好域名,直接给个报个404: 解决方法: 1.先在phpstudy下配置好域名目录指向项目下的public下 ...
- 怎么用Sublime查找替换整个文件夹下的所有文件内容？
https://segmentfault.com/q/1010000003946095 工程目录下有很多图片路径要修改,很多散落在各个文件夹. 2015年11月03日提问 评论 邀请回答 编辑 4个回 ...
- 利用光场进行深度图估计(Depth Estimation)算法之二——匹配算法
光场相机由于能够捕获相机内部光线的强度和方向而得到整个光场,可以实现重聚焦(refocus)和视角变换等功能.进而可以进行深度估计获取深度图,前面说过利用重聚焦的图像进行深度估计,今天说一下利用不同视 ...