效果:

在style.js文件里封装了一个Show函数,有4个参数,di(当前点击的按钮),num(按钮个数,也可以说是下面具体内容个数),divn(一个id前缀,这个例子里是ta,),active(当前按钮的类名,可控制不同于其他按钮的个性样式),

按钮有不同id,第一个叫ta0,第二个ta1...,鼠标划入时触发Show函数,传入不同的参数,js文件里先获取到当前按钮,给他加上个性类名active(current),再获取下面的对应内容区域,给他显示,接下来就要处理那些鼠标没划入,这里用一个for循环和判断解决,“di!=i”,确保剔除掉当前按钮和内容,其他的就去掉个性类名current和内容不显示了。(可以实现多个按钮切换,也可同理编写点击事件)。

能套用的tab栏切换的更多相关文章

  1. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  2. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  3. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  4. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  5. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  6. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  7. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  8. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

  9. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

随机推荐

  1. 【转】CentOS6.3安装Broadcom无线网卡驱动

    转自: http://blog.csdn.net/jimanyu/article/details/9697833 下面是具体的步骤 一:确定无线网卡的型号,驱动下载 第一步要确定机子的无线网卡型号是什 ...

  2. mobile web HTML5 app曾经的踩过坑(转)

    兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些. 但是手机端,虽然出了很多工具,但是 ...

  3. ACM 变态最大值

    变态最大值 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这么烂,幸好在他的帮助下大家算是解 ...

  4. 不需要了解任何底层知识,就可以汉化!Let`s go!!!

    汉化?莫要被这两个字吓到. 其实你也可以汉化,跟着我的步骤来,你也可以进行汉化,Let`s go!!!(大鸟飘过) 这里汉化的是微软企业类库的配置管理工具EntLibConfig.exe.当然,这里的 ...

  5. Android -- 重设字符并统计原字符以及修改字符的长度以及位置

    1. 效果图

  6. Crystal Reports 2008(水晶报表) 启动时检查更新

    在安装好了Crystal Reports后,每次打开的是都会出现以下提示: 服务器正在运行中 由于另一个程序正在运行中,此操作无法完成.请选择“切换到”来激活正在运行中的程序,并更正问题. 碰到这样的 ...

  7. 配置安装CocoPods后进行 项目基本配置

    配置安装CocoPods后进行 项目基本配置总结 1)终端在文件根目录下输入 $ touch Podfile 创建一个空白的Podfile文件 2)然后在使用编辑器打开Podfile文件进行需要配置的 ...

  8. Linux下设置svn过滤文件类型

    1)修改客户端. 1.修改客户端 1)编辑文件家目录下自己账户下的.subversion/config文件 vim ~/.subversion/config 2)找到包含[miscellany]的一行 ...

  9. webdriver中定位元素,报无法找到元素的问题

    webdriver中定位元素,报无法找到元素的问题时,需要查看以下几点: 1 用火狐的firebug插件定位元素,确保这个元素的定位正确: 2 在火狐的firebug插件的,在html页签中输入fra ...

  10. java script小结

    javascript是一种嵌入在网页里的程序段,是一种解释性语言,只能被浏览器解释执行.出于安全性的考虑,增加了javascript的限制,增强了客户端交互功能. JavaScript的作用: 1.增 ...