我是一个乞丐,我找不到解决问题的麻烦。 我有一个网站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:我希望我的问题描述清楚:/
答案 0 :(得分:1)
我建议"帮助"通过专门而不是全局应用行为来实现您的javascript。
而不是将您的点击行为绑定到您网页上的所有链接
$('a[href*=#]:not([href=#])')
尝试将其绑定到使用公共类锚定标记(在此示例中为nav-link
),并将该类分配给导航栏中的每个链接
$('a.nav-link[href*=#]:not([href=#])')
或至少将此功能仅分配给您的.nav
锚标记
$('.nav a[href*=#]:not([href=#])')
这样,您网页上的所有其他链接的行为就像您通常会beha劫持"导航链接的行为。
答案 1 :(得分:0)
这是一个很好的解决方案,但你可以做的是:
$('a[href*=#]:not([href=#]), a[href*=#]:not([href=#daksh]), a[href*=#]:not([href=#anna]), a[href*=#]:not([href=#wafer])')
这将排除您要用于推荐部分的链接。
答案 2 :(得分:0)
我有2个适用的解决方案:
如果您颠倒了点击处理程序的顺序(它们的调用顺序与创建顺序相同),那么将.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
});
});
答案 3 :(得分:-1)
$('.nav a').on('click', function(){
$(".navbar-toggle").click();
});