先上效果, 代碼引用了jquery的框架 復制代碼

功能實現(xiàn)比較簡單，代碼如下所示：

html代碼如下

<div class='tabchouse'> <!--設置元素位置--><ul> <!--元素內(nèi)容--><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');}) 復制代碼

在線地址

在線地址
這個效果這項目中使用比較百搭，改改樣式就能這項目中使用了！

總結(jié)

以上是生活随笔為你收集整理的前端常用效果（2）带效果的tab切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。