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

最新推荐文章于 2025-06-19 12:40:23 发布

转载最新推荐文章于 2025-06-19 12:40:23 发布 · 434 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b32143a518825749d2d623d

文章标签：

#前端 #javascript #ViewUI

本文介绍了一个基于jQuery实现的简单选项卡滑块效果。通过HTML、CSS和JS代码，实现了鼠标悬停时标题下方出现滑块的效果，并附带代码示例及在线演示链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果, 代码引用了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');
    })
复制代码