Question

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

这是我的代码：

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

如果我正确理解了这一点，您只需为标签添加防止默认值

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

我希望这有帮助:)

Answer 2

1）。 event.preventDefault()

{{3}}关于它。

阻止<a>重新加载。

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

2。）href带有哈希

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

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

2 个答案: