怎么改导航让它效果像万科网站导航一样滑块切换

请问要怎么改js才能像http://www.vanke.com/ 里面的导航滑块效果一样



<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./js/jquery.min.js"></script>
        <script>
            $(function () {                var nav = $("#nav"),
                    link = nav.children(),
                    linkon = link.filter(':not(.more)'),
                    linkoff = link.filter('.more');
                link.hover(function () {
                        $(link).removeClass("wrap_menu1_2");
                        $(this).addClass("wrap_menu1_2");
                    },
                    $("nav").mouseleave(function () {
                        $("linkon").addClass("wrap_menu1_2")
                    }));
            });        </script>
        <style>
            ul li{            list-style:none;
            }            #nav {                position: absolute;                top: 0;                right: 171px;                z-index: 4;                height: 60px;                background-color: #fff;                overflow: hidden;
            }    
            #nav li {                float: left;                height: 100%;                -webkit-transition: background-color 700ms;                transition: background-color 700ms;
            }    
            #nav li a {                position: relative;                z-index: 2;                display: block;                width: 100%;                height: 100%;                font-weight: bold;                padding:15px 10px;                font-size: 13px;                line-height: 79px;                text-align: center;                color: #666;                -webkit-transition: color 200ms;                transition: color 200ms;
            }    
            .wrap_menu1_2 {                background: red;
            }        </style>
    </head>
    
    <body>
        <div class="nav-box">
            <ul id="nav">
                <li class="wrap_menu1 wrap_menu1_2">
                    <a href="#">home</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link1</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link2</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link3</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link4</a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>
凛柊
浏览 1151回答 1
1回答

随时随地看视频慕课网APP