Question

我是一个乞丐，我找不到解决问题的麻烦。我有一个网站http://prepfocus.in/test。我用javascript滚动效果。以下是代码：

jQuery(function($) {
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: (target.offset().top - 80)
            }, 1000);
            return false;
        }
    }
});
$('.nav a').on('click', function(){
        $(".navbar-toggle").click() 
});
});

问题在于它与“推荐”部分中的内容相冲突。单击的图像（内部链接）不显示与其关联的文本，另一方面，它提供滚动效果。

可以在此处找到推荐部分代码：http://bootsnipp.com/snippets/featured/fancy-tabs-responsive

如何解决这个问题？

P.S：我希望我的问题描述清楚：/

Answer 1

我建议＆＃34;帮助＆＃34;通过专门而不是全局应用行为来实现您的javascript。

而不是将您的点击行为绑定到您网页上的所有链接

$('a[href*=#]:not([href=#])')

尝试将其绑定到使用公共类锚定标记（在此示例中为nav-link），并将该类分配给导航栏中的每个链接

$('a.nav-link[href*=#]:not([href=#])')

或至少将此功能仅分配给您的.nav锚标记

$('.nav a[href*=#]:not([href=#])')

这样，您网页上的所有其他链接的行为就像您通常会beha劫持＆＃34;导航链接的行为。

Answer 2

这是一个很好的解决方案，但你可以做的是：

$('a[href*=#]:not([href=#]), a[href*=#]:not([href=#daksh]), a[href*=#]:not([href=#anna]), a[href*=#]:not([href=#wafer])')

这将排除您要用于推荐部分的链接。

Answer 3

我有2个适用的解决方案：

stopImmediatePropagation

如果您颠倒了点击处理程序的顺序（它们的调用顺序与创建顺序相同），那么将.nav a首先调用一个，然后在其中调用event.stopImmediatePropagation()。它将阻止调用第二个处理程序。

委派处理程序

您可以使用事件冒泡和jQuery的delegated event handling：不直接在<a>元素上设置滚动处理程序，例如在<body>元素上。而不是从false处理程序返回.nav a将阻止＆＃39;滚动＆＃39;被称为处理程序。它看起来大致如下：

jQuery(function($) {
    $('body').on('click', 'a[href*=#]:not([href=#])', function() {
        // handler code
    });
    $('.nav a').on('click', function(){
        $(".navbar-toggle").click()
        return false;  // prevents delegated handler from being called
    });
});

Answer 4

你错过了分号吗？试试这个：

$('.nav a').on('click', function(){
  $(".navbar-toggle").click();
});

如何从javascript </div>中排除特定的<div>

4 个答案:

stopImmediatePropagation

委派处理程序