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

Posted 2023-05-08

【中文标题】单击导航栏项目后如何防止重新加载单页应用程序？

【英文标题】：How to prevent reloading single page application after clicking navigation bar items?

【发布时间】：2016-12-25 11:46:12

【问题描述】：

我正在构建一个简单的 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;
        
    
);

【参考方案1】：

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

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

我希望这会有所帮助:)

【参考方案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="#">，它将不会重新加载页面，因为链接指的是内部更改。但是，由于单页应用程序的性质，这是不利的。

【讨论】：

有没有办法让网址更漂亮？

定义更漂亮？我通常使用 www.example.com/#/page/ 语法。

我更新了 jQuery 代码。您能否向我解释一下，因为我在互联网上找到了它，它完全符合我的需要？

这有点复杂/混淆了。查看window.location.hash 上的文档以了解我的意思。