JQuery实现流体导航栏_流体式导航网页-优快云博客

本文链接：https://blog.youkuaiyun.com/Error_ABC/article/details/108628140

本文介绍了一种使用CSS和jQuery实现的动态导航栏效果，通过鼠标点击改变导航按钮的背景颜色，同时平滑过渡到目标位置，增强了用户体验。代码中详细展示了如何设置HTML结构、CSS样式以及jQuery交互逻辑。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .nav{
        width: 300px;
        height: 50px;
        border:1px solid #000000;
        position: relative;
        margin:0 auto;
    }
    .top{
        width: 250px;
        height: 30px;
        position: relative;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
    }
    a{
        display: block;
        width: 90px;
        height: 30px;
        text-align: center;
        text-decoration: none;
    }
    .b{
        width: 250px;
        height: 30px;
        position: relative;
        margin:0 auto;
    }
    .bto{
        width: 80px;
        height: 10px;
        background-color: deeppink;
        transition: 0.5s;
    }
</style>
<body>
    <div class="nav">
        <div class="top">
        <a href="">Left</a>
        <a href="">Center</a>
        <a href="">Right</a>
        </div>
        <div class="b"><div class="bto"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        var m=0
        var timerId=null
        $('a').click(function(e){
            e.preventDefault()
            console.log(m)
            var x=$(this).index()
            if(m<x){
            $('.bto').css('width',(x-m+1)*80+'px')
            setTimeout(function(){
                $('.bto').css('width','80px')
                $('.bto').css('marginLeft',x*80+'px')
            },500)
            }else{
                $('.bto').css('marginLeft',x*80+'px')
                $('.bto').css('width',(m-x+1)*80+'px')
                setTimeout(function(){
                $('.bto').css('width','80px')
                $('.bto').css('marginLeft',x*80+'px')
            },500)
            }
            m=x
            return m
        })
    </script>
</body>
</html>

效果图：
流体导航栏演示