jQuery如何在URL中隱藏哈希

Question

我知道這個問題被問過幾次，但是我是jQuery的新手，也不知道如何處理這個問題。

我在網站上使用下拉菜單： http ://ms.nordfire.de/fuchsbau16/當我觸發菜單按鈕時，“＃0”會附加到我的URL后面。 有什么辦法可以消除附加到我的URL上的井號？

那就是我正在使用的jQuery代碼：

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

您需要防止鏈接的默認“點擊”行為，如下所示：

$('.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');
        }); 
    }
});

注意回調函數中的e 。 您需要包括對將要觸發的事件的引用，以便您可以對其進行修改。

Answer 2

在您的JS中，您必須添加

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

e.preventDefault(); 防止默認的HTML行為會重新加載整個網站。

另外，您可以編輯HTML。 看錨點：

<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>

它們包含您的#0 。 您應該通過插入真實的URL來使頁面對js不友好，以便禁用JS的人也可以瀏覽您的網站（甚至不會獲得#0 ）