Question

我知道这个问题被问过几次，但我是一个jQuery新手，并且不知道如何处理这个问题。

我在我的网站上使用了滑动菜单：http://ms.nordfire.de/fuchsbau16/ 当我触发菜单按钮时，“＃0”会附加到我的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

您需要阻止默认＆＃34;点击＆＃34;链接的行为如下：

$('.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。您应该通过插入真实网址使页面非js友好，以便禁用JS的人也可以浏览您的网站（甚至不会获得#0）

jquery如何在url中隐藏哈希

2 个答案: