jQuery实现tab选项卡

效果图如下

代码如下

<html><head>
<title></title>
</head><style>*{margin:0;padding:0;}.tab{margin:0 auto;}.nav{height:20px;width:240px;background:yellow;}.nav>li{width:60px;height:20px;float:left;list-style:none;text-align:center;line-height:20px;}.nav .showtab{background:#ccc;}.content{width:240px;height:200px;background:red;}.content div{display:none;}.content .show-content{display:block;}</style><script src="http://code.jquery.com/jquery-latest.js"></script><script>$(function(){$('.nav>li').mouseenter(function(){                        //获取到所有的li，并且加入移入事件$('.nav>li').eq(0).removeClass('showtab');             //默认是第一个tab，这样是去除第一个tab样式，如果不加这行代码，鼠标直接移到tab2,3,4，tab1样式还在$('.content>div').eq(0).removeClass('show-content')    //上面同理$(this).addClass('showtab');                           //$(this)指鼠标进入的那个li的对象，给它添加一个样式var $index=$(this).index();                            //$(this).index()指下标，表示移到第几个tab，这样就可以与下面div对应，第一个tab对应第一个div

　　　　　　　　$('.content>div').eq($index).addClass('show-content')    //移到哪个tab，就给哪个div添加类　　　　　　}) 　　　　　　$('.nav>li').mouseleave(function(){                          //获取所有li，并且加入移除事件　　　　　　　　$(this).removeClass('showtab');                           //当从一个tab移到另一个tab，需要把之前的tab样式给去除，回复原样　　　　　　　　var $index=$(this).index(); 　　　　　　　　$('.content>div').eq($index).removeClass('show-content')  //tab样式移除了，相应的div样式也需要移除　　　　　　}) 　　　　　　$('.nav').mouseleave(function(){                             //给整体的tab选项卡加个移除事件，如果不加，当鼠标不在tab里，发现tab和div都是没有选中　　　　　　　　$('.nav>li').eq(0).addClass('showtab');                   //当鼠标移除选项卡，样式恢复到最初的模样　　　　　　　　$('.content>div').eq(0).addClass('show-content') 　　　　　　}) 　　　　}) 　　</script> <body> 　　<div class="tab"> 　　　　<ul class="nav"> 　　　　　　<li class="showtab">tab1</li>　　　　　　<li>tab2</li> 　　　　　　<li>tab3</li>　　　　　　<li>tab4</li> 　　 </ul> 　　  <div class="content"> 　　　　<div class="show-content">tab1</div> 　　　　 <div>tab2</div> 　　　　 <div>tab3</div> 　　　　 <div>tab4</div> 　　  </div> 　　</div> 　</body> </html>

转载于:https://www.cnblogs.com/superCwen/p/9932004.html

jQuery实现tab选项卡相关推荐

使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）
效果图 tab.html <!DOCTYPE html> <html lang="zh-CN"> <head ...
jQuery制作tab选项卡
用jQuery来制作tab的选项卡. 说白了就是切换到别的选项,已简单的例子来说,先写出样式. CSS部分: <style>ul,li{list-style: none;margin: 0 ...
基于jQuery实现tab选项卡【js实现页签切换】
任务描述本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...
[jQuery基础] jQuery事件相关案例 -- 电影排行榜、Tab选项卡
电影排行榜实现效果展示实现步骤第一步(实现静态效果) css部分 *{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: ...
jQuery特效Tab切换栏选项卡demo
在建站过程中,有时候需要有效利用页面空间,需要将多个模块的链接.图片.视频等网站资源放在一个div中,实现点击或者滑动实现展示多个模块,多用在侧边栏展示网站最新更新.最热文章,或者是展示顶级频道页面下 ...

jQuery实现tab选项卡

jQuery实现tab选项卡相关推荐

最新文章

热门文章