单击导航栏项目后如何防止重新加载单页应用程序？

Question

我正在构建一个简单的 SPA（它包含轮播部分、关于我们的部分、一些表单，然后是团队部分......）我有一个简单的问题：如何防止在单击导航栏项目后重新加载页面并保留 url和一开始一样吗？单击每个导航栏项目页面会向下滚动到所选部分。

这是我的代码：

HTML 导航栏：

<nav id="navBar" class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationBar">
                    <span class="sr-only">Toogle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="./media/img/....png"/>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navigationBar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#abc">Home</a></li>
                    <li><a href="#aaa">About us</a></li>
                    <li><a href="#bbb">...</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-toggle="modal" data-target="#registrationModal"><span class="glyphicon glyphicon-user"></span> Registration</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
</nav>

jQuery：

$('.navbar li 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 - 100
            }, 1000);
            return false;
        }
    }
});

Answer 1

如果我理解正确，您只需要为 a 标签添加一个阻止默认值

$('.navbar li a').click(function (event){
  event.preventDefault();
  $('body,html').animate({
    scrollTop: $($(this).attr('href')).offset().top - 100},2000);
});

我希望这会有所帮助:)

Answer 2

1.) event.preventDefault()

Documentation关于它。

防止<a>重新加载。

$('.navbar li a').click(function (e) {
    e.preventDefault()
    $('body,html').animate({
        scrollTop: $($(this).attr('href')).offset().top - 100
    },2000);
});

2.) href带哈希

如果您更改<a href="#">，它将不会重新加载页面，因为链接指的是内部更改。但是，由于单页应用程序的性质，这是不利的。