event.preventDefault останавливает социальные иконки средств массовой информации от работы

Question

<script> 
 
$(document).ready(function(){ 
 
$('body').scrollspy({target: "#navbar", offset: 50}); 
 
$("#myNavbar a").on('click', function(event) { 
 
event.preventDefault(); 
 
var hash = this.hash; 
 
$('html, body').animate({scrollTop: $(hash).offset().top 
 
    }, 2150, function(){ 
 
    }); 
 
    }); 
 
}); 
 
</script>

<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"> 
 
    \t <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> 
 
    \t </ul> 
 
     <div id="social_nav"> 
 
    \t <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>

Привет, У меня есть загрузочный СЧА с scrollspy плавно переходят между разделами на этой странице. Это использует event.preventDefault();, чтобы остановить перескакивание страницы и это нормально. Однако у меня есть вторая часть навигация с иконками в социальных сетях, которые нужно связать с веб-страницей, и они также перестали работать с event.preventDefault();

Есть ли остановка event.preventDefault(); для значков социальных сетей, другая страница nav пунктов пожалуйста.

Немного веб-страниц diy noob, так что, возможно, это легко, но я лишен.

Answer 1

Вы можете просто исключить социальные иконки из обработчика событий

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

Если это сделать, нет никаких оснований для перехода на эти иконки при нажатии, так как они в любом случае перенаправления.

Answer 2

ПредотвращениеDefault останавливает ссылки на выполнение их поведения по умолчанию, в этом случае идет связанный URL. Это немного хакерское решение, но вы можете добавить класс (социальная ссылка в примере) к любым ссылкам в навигационной панели, которые должны перейти на настоящий 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(){ }); 
    } 
    }); 
});