Question

我正在使用bootstap。

我希望滚动到其部分时每个类都会改变。

当我想添加“活跃的”时，我成功地做到了这一点。或者删除它。

但我使用＆＃39;选择＆＃39;

购买了html设计

要明确这是我要做的事情的样本(--HERE--)

这个只会改变活跃的＆＃39;每一个都是一个＆＃39;链接，

但是在我的作品中，它被选中了＃39;每个人都是一个滚动链接，

这些是我想改变的按钮：

<li class="home">
<a href="#home" class="scroll-link selected" data-id="home">Home</a>
</li>
<li>
<a href="#about" class="scroll-link" data-id="about">About</a>
</li>

这是一个部分示例：

<section id="home" class="slider-bg">

这是我做过的java脚本：

<script class="scroll-link">
            // ADDS ACTIVE CLASS TO LINKS WHEN SECTION WITH THE SAME SELECTOR AS THE HREF IS REACHED (CLASS .LINK IS NEEDED ON ALL <a> TAGS)

            $(document).ready(function () {
                $(window).scroll(function () {

                    var y = $(this).scrollTop();

                    $('.scroll-link').each(function (event) {
                        if (y >= $($(this).attr('href')).offset().top - 40) {
                            $('.scroll-link').not(this).removeClass('selected');
                            $(this).addClass('selected');
                        }
                    });
                });
            });

            // SMOOTH SCROLLING (with negative scroll of 40 for header)

            $(function () {
                $('a[href*=#]:not([href=#])').click(function () {
                    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: (target.offset().top - 40)
                            }, 850);
                            return false;
                        }
                    }
                });
            });

            vent.preventDefault();
                </script>

这就是设计师所做的所有内容：

<!-- jQuery & Helper library --> 
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/jquery.appear.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.min.js"></script> 
<script type="text/javascript" src="js/modernizr-latest.js"></script> 
<script type='text/javascript' src="js/jquery.fitvids.js"></script> 
<script type="text/javascript" src="js/retina.js"></script> 
<script type="text/javascript" src="js/jquery.fancybox.pack8cbb.js?v=2.1.5"></script> 
<script type='text/javascript' src="js/owl.carousel.min.js"></script> 
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script> 
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script> 
<script type="text/javascript" src="js/stellar.js"></script> 
<script type="text/javascript" src="js/jquery.validate.min.js"></script> 
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script> 
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script> 
<script type="text/javascript" src="js/jquery.gmap.min.js"></script>

如你所见，我写过我的剧本：

vent.preventDefault();

这一行将覆盖阻止这种情况发生的事情。

请帮助我，我是网页新手，但我是CS的新毕业生。

Answer 1

我认为存在vent.preventDefault();的问题，这应该与event.preventDefault();一样，并且在您将event作为参数传递的函数内部，例如：

<script class="scroll-link">
            // ADDS ACTIVE CLASS TO LINKS WHEN SECTION WITH THE SAME SELECTOR AS THE HREF IS REACHED (CLASS .LINK IS NEEDED ON ALL <a> TAGS)

            $(document).ready(function () {
                $(window).scroll(function () {

                    var y = $(this).scrollTop();

                    $('.scroll-link').each(function (event) {
                        if (y >= $($(this).attr('href')).offset().top - 40) {
                            $('.scroll-link').not(this).removeClass('selected');
                            $(this).addClass('selected');
                        }
                        event.preventDefault();
                    });
                });
            });

            // SMOOTH SCROLLING (with negative scroll of 40 for header)

            $(function () {
                $('a[href*=#]:not([href=#])').click(function () {
                    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: (target.offset().top - 40)
                            }, 850);
                            return false;
                        }
                    }
                });
            });

                </script>

在脚本结束时，它没有获得任何event数据。

在滚动时动态更改固定导航栏中的类

1 个答案: