Question

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
     
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    	<ul class="nav navbar-nav">
<li><a href="#section1"><h5><b>Home</b></h5></a></li>
<li><a href="#section3"><h5><b>other</b></h5></a></li> 
<li><a href="#section5"><h5><b>other2</b></h5></a></li>
<li><a href="#section6"><h5><b>other3</b></h5></a></li>
    	</ul>
        <div id="social_nav">
    	<ul class="nav navbar-nav navbar-right">
<li><a href="https://uk.pinterest.com" target="blank"><span class="fa fa-pinterest-square fa-2x"></span></a></li>
<li><a href="https://www.instagram.com" target="blank"><span class="fa fa-instagram fa-2x"></span></a></li>
<li><a href="http://www.facebook.com"  target="blank"><span class="fa fa-facebook-square fa-2x"></span></a></li>
        </ul>
        </div> 
    </div>
  </div>
</nav>

event.preventDefault();

您好，我有一个bootstrap导航，滚动在页面的各个部分之间平滑移动。这使用event.preventDefault();来阻止页面跳跃并且很好。然而，我有导航的第二部分，社交媒体图标需要链接到网页，这些也被event.preventDefault();

停止工作

有没有停止Given an array of ints, return true if .. 1, 2, 3, .. appears in the array somewhere. array123({1, 1, 2, 3, 1}) → true array123({1, 1, 2, 4, 1}) → false array123({1, 1, 2, 1, 2, 3}) → true`社交媒体图标，但请将其留给其他页面导航项目。

有点网络diy noob所以也许这很容易，但我很愚蠢。

Answer 1

您可以从事件处理程序中排除社交图标

$("option:selected").ready(function(){
    alert($(this).val());//use to get seleted option value
    alert($(this).parent().val());//use to get selected option value using select
    alert($(this).parent().attr("id"));//use to get select element id of selected:option
});

应该这样做，没有理由在点击时滚动到这些图标，因为它们无论如何都会重定向。

Answer 2

preventDefault阻止链接执行其默认行为，在这种情况下转到链接的URL。这是一个hacky解决方案，但你可以在导航栏中的任何链接添加一个类（示例中的社交链接），需要转到真实的URL，然后在JavaScript中恢复该行为：

$(document).ready(function(){
  $('body').scrollspy({target: "#navbar", offset: 50});

  $("#myNavbar a").on('click', function(event) {
    event.preventDefault();
    var hash = this.hash;

    if (this.hasClass('social-link')) {
      window.location = this.href;
    } else {
      $('html, body').animate({scrollTop: $(hash).offset().top }, 2150, function(){ });
    }
  });
});

event.preventDefault阻止社交媒体图标工作

2 个答案: