Question

我对jquery有0个知识，我无法从中获取这个粘贴的jquery Change Active Menu Item on Page Scroll? 工作。

var lastId,
    topMenu = $("#nav"),
    topMenuHeight = topMenu.outerHeight()+15,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });
    menuItems.click(function(e){
    var href = $(this).attr("href"),
    offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    $('html, body').stop().animate({ 
    scrollTop: offsetTop
    }, 300);
    e.preventDefault();
    });
    $(window).scroll(function(){
    var fromTop = $(this).scrollTop()+topMenuHeight;
    var cur = scrollItems.map(function(){
    if ($(this).offset().top < fromTop)
       return this;
    });
    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";
    if (lastId !== id) {
    lastId = id;
    menuItems
    .parent().removeClass("active")
    .end().filter("[href=#"+id+"]").parent().addClass("active");
    }                   
});

请帮助我，这就是我在网站上的内容：http://jsfiddle.net/cL3jA/4/

Answer 1

您需要添加jQuery库引用，例如

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

更新了 jsFiddle

* *更新：单个文件（test.html）中的示例

<!doctype>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <style>
            body {
                background-image: url(../images/noise.png);
                background-repeat: repeat;
                width:100%;
                height: 100%;
            }
            #wrapper {
                float: left;
                width: 80%;
                max-width: 960px;
                background-image: url(../images/white.png);
                background-repeat: repeat;
            }
            #nav {
                font-family: 'Asap', sans-serif;
                font-weight: 700;
                font-size: 20px;
                position: fixed;
                left: 0px;
                top: 20%;
                list-style-type: none;  
                color: #000;
            }
            #nav li {
                cursor: pointer;
                width: 100px;
                margin-bottom: 10px;
                padding: 3px;
                text-align: right;
                -webkit-transition-duration: 0.4s;
                -moz-transition-duration: 0.4s;
                -o-transition-duration: 0.4s;
                transition-duration: 0.4s;
            }
            #nav li:hover {
                width: 120px;
            }
            li a {
                text-decoration: none;
                color: #000;
            }
            li:hover a {
                color: #CDCDCD;
            }
            .active {
            }
            .active a {
                color: #CDCDCD;
            }
            .active li {
                padding-left: 20px;
            }
            #hello {
                width:100%;
                height: 1000px;
            }
            #about {
                width:100%;
                height: 1000px;
            }
            #yolo {
                width:100%;
                height: 1000px;
            }
            #swag {
                width:100%;
                height: 1000px;
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li class="active"><a href="#hello">Hello</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#yolo">Yolo</a></li>
                <li><a href="#swag">Swag</a></li>
            </ul>
        </div>
        <div id="wrapper">
            <div id="hello">
                <a id="hello">hello</a>
            </div>
            <div id="about">
                <a id="about">about</a>
            </div>
            <div id="yolo">
                <a id="yolo">yolo</a>
            </div>
            <div id="swag">
                <a id="swag">swag</a>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
            var lastId,
                    topMenu = $("#nav"),
                    topMenuHeight = topMenu.outerHeight() + 15,
                    menuItems = topMenu.find("a"),
                    scrollItems = menuItems.map(function() {
                        var item = $($(this).attr("href"));
                        if (item.length) {
                            return item;
                        }
                    });
            menuItems.click(function(e) {
                var href = $(this).attr("href"),
                        offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
                $('html, body').stop().animate({
                    scrollTop: offsetTop
                }, 300);
                e.preventDefault();
            });
            $(window).scroll(function() {
                var fromTop = $(this).scrollTop() + topMenuHeight;
                var cur = scrollItems.map(function() {
                    if ($(this).offset().top < fromTop)
                        return this;
                });
                cur = cur[cur.length - 1];
                var id = cur && cur.length ? cur[0].id : "";

                if (lastId !== id) {
                    lastId = id;
                    menuItems
                            .parent().removeClass("active")
                            .end().filter("[href=#" + id + "]").parent().addClass("active");
                }
            });
        </script>
    </body>
</html>

滚动导航上的变量活动标签

1 个答案: