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

问题描述：

我正在构建一个简单的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） 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="#">它不会重新加载页面，因为该链接指向一个内部的变化。但是，由于单页应用程序的性质，这是不利的。

，是有办法让一个漂亮的网址？ – DevMan

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

我更新了jQuery代码。你可以向我解释，因为我在互联网上发现它，它确实是我需要的吗？ – DevMan

答

如果我正确理解这一点，你只需要添加一个防止默认为一个标签

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

我希望这有助于:)

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

相关推荐