导航栏滑动居中

最新推荐文章于 2025-05-27 11:28:05 发布

原创最新推荐文章于 2025-05-27 11:28:05 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的响应式导航栏设计方法。通过动态调整滚动位置，确保点击导航项时，选中项居中显示且高亮。文章详细解释了代码实现细节，包括使用jQuery简化DOM操作。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <style type="text/css">
        header {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            overflow-x: scroll;
        }
        header::-webkit-scrollbar {
            display: none;
        }

        .nav {
            display: inline-block;
            margin-left: 15px;
            margin-right: 10px;
            height: 50px;
            line-height: 50px;

        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<header>
    <div class="nav">
        基本信息
    </div>
    <div class="nav">
        今借到
    </div>
    <div class="nav">
        多头借贷
    </div>
    <div class="nav">
        运营商
    </div>
    <div class="nav">
        央行征信信息
    </div>
    <div class="nav">
        支付宝信息
    </div>
    <div class="nav">
        法院失信名单
    </div>
    <div class="nav">
        学历信息
    </div>
    <div class="nav">
        社保信息
    </div>
    <div class="nav">
        公积金信息
    </div>
</header>
<script type="text/javascript">
    $(function(){
        $(".nav").on("click",function(ev){
            var moveX = $(this).position().left+$(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            console.log(moveX)
            console.log(pageX);
            console.log(blockWidth);
            var left = moveX-(pageX/2)+(blockWidth/2);
            console.log(left);
            $(this).css("color","red").siblings().css("color","#000000");
            $("header").scrollLeft(left);


        })




    });
</script>
</body>
</html>