前端常用效果（2）带效果的tab切换

先上效果, 代码引用了jquery的框架
复制代码

功能实现比较简单，代码如下所示：

html代码如下

   <div class='tabchouse'>                         <!--设置元素位置--><ul>                  <!--元素内容--><li class='active'>标题1</li> <li>标题2</li><li>标题3</li></ul><i class='link'></i>                    <!--这是标题下面的滑块--></div>
复制代码

css代码如下

    body {background: #666}* {padding: 0}ul,li {list-style: none;}.tabchouse {width: 540px; /*这里总宽度是写死的方便居中,有需求可以自行修改，是三个li的宽度之和*/margin: 0 auto;height: 41px;position: relative;}ul {font-size: 18px;width: 100%;color: #fff;height: 40px;position: relative;}ul li {float: left;width: 180px;height: 41px;line-height: 41px;text-align: center;cursor: pointer;}ul li:hover,ul li.active {color: #f39800;}.link {position: absolute;display: inline-block;height: 3px;width: 140px;bottom: 0px;left: 20px;background: #f39800;}
复制代码

js代码如下

    var _left;$('.tabchouse ul').on('mouseover', 'li', function() {_left = ($(this).index()) * 180 + 20 + 'px';    //180是li宽度，20是180-link的宽度140再除以2的值$('.link').animate({'left': _left}, 50);})$('.tabchouse').on('mouseleave', 'ul', function() {_left = ($('.tabchouse ul .active').index()) * 180 + 20 + 'px';$('.link').animate({'left': _left}, 50);})$('.tabchouse ul').on('click', 'li', function() {$(this).siblings().removeClass('active');$(this).addClass('active');})
复制代码

在线地址

在线地址
这个效果这项目中使用比较百搭，改改样式就能这项目中使用了！

前端常用效果（2）带效果的tab切换相关推荐

php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
html 侧边栏 tab,利用jQuery实现侧边栏Tab切换效果
这两天一直在折腾wordpress的侧边栏,基本功能都实现得差不多了.但总还觉得有些不足,就像先看看童鞋所说的折腾点其它功能出来吧.我自然也是不满足于此,正好在木木童鞋小站看到jQuery之Tab切换 ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...
前言之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...
小程序tab切换效果
小程序实现tab切换很简单,只需要完成两部分. 1.页面 2.js触发时间先上效果: image.png 接下来介绍页面代码: 控制切换的Tab <view class="swipe ...
JavaScript 图片切割效果（带拖放、缩放效果）
JavaScript 图片切割效果(带拖放.缩放效果) 转载于:https://www.cnblogs.com/xiaoluozi513/archive/2008/11/14/1333882.html
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...

前端常用效果（2）带效果的tab切换

html代码如下

css代码如下

js代码如下

在线地址

前端常用效果（2）带效果的tab切换相关推荐

最新文章

热门文章