jquery Comment cacher hash en url

Question

Je sais que cette question a été posée à plusieurs reprises, mais je suis un novice jQuery total et n'ai aucune idée de comment gérer ce problème.

J'utilise un menu déroulant sur mon site: http://ms.nordfire.de/fuchsbau16/ Lorsque je déclenche le bouton de menu, «# 0» est ajouté à mon URL. Est-il possible de me débarrasser du hashtag ajouté à mon URL?

thats le code jquery J'utilise:

jQuery(document).ready(function($){ 

//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well 
var MQL = 1170; 

//primary navigation slide-in effect 
if($(window).width() > MQL) { 
    var headerHeight = $('.cd-header').height(); 
    $(window).on('scroll', 
    { 
     previousTop: 0 
    }, 
    function() { 
     var currentTop = $(window).scrollTop(); 
     //check if user is scrolling up 
     if (currentTop < this.previousTop) { 
      //if scrolling up... 
      if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) { 
       $('.cd-header').addClass('is-visible'); 
      } else { 
       $('.cd-header').removeClass('is-visible is-fixed'); 
      } 
     } else { 
      //if scrolling down... 
      $('.cd-header').removeClass('is-visible'); 
      if(currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed'); 
     } 
     this.previousTop = currentTop; 
    }); 
} 

//open/close primary navigation 
$('.cd-primary-nav-trigger').on('click', function(){ 
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open'); 

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden 
    if($('.cd-primary-nav').hasClass('is-visible')) { 
     $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
      $('body').removeClass('overflow-hidden'); 
     }); 
    } else { 
     $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
      $('body').addClass('overflow-hidden'); 
     }); 
    } 
}); 

});

Answer 1

Vous devez empêcher le défaut « cliquez sur » le comportement du lien comme ceci:

$('.cd-primary-nav-trigger').on('click', function(e){ 
    e.preventDefault(); 

    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open'); 

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden 
    if($('.cd-primary-nav').hasClass('is-visible')) { 
     $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
      $('body').removeClass('overflow-hidden'); 
     }); 
    } else { 
     $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
      $('body').addClass('overflow-hidden'); 
     }); 
    } 
}); 

Notez la e dans la fonction de rappel. Vous devez inclure la référence à l'événement qui est déclenché afin de pouvoir le modifier.

Answer 2

Dans votre JS, vous devrez ajouter

$('.cd-primary-nav-trigger').on('click', function(e){ 
    e.preventDefault(); // prevents page redirection 

Le e.preventDefault(); empêche le HTML comportement par défaut qui recharger l'ensemble de votre site.

De plus, vous pouvez éditer votre code HTML. Regardez les points d'ancrage:

<nav> 
    <ul class="cd-secondary-nav"> 
     <li><a href="#0">Quicklink 01</a></li> 
     <li><a href="#0">Quicklink 02</a></li> 
     <li><a href="#0">Quicklink 03</a></li> 
    </ul> 
</nav> 

Ils contiennent votre #0. Vous devriez rendre la page non-js amicale en insérant de vraies URL afin que les personnes qui ont désactivé JS puissent aussi naviguer sur votre site (et même pas #0)