我在其中一个页面上有标签。每个标签都会加载动态内容:
HTML
<ul>
<li><a href="#tab-1">TAB 1</li>
<li><a href="#tab-2">TAB 2</li>
<li><a href="#tab-3">TAB 3</li>
</ul>
jQuery - onclick
$('li a').on('click', function(e) {
$('li a').removeClass('active');
$(this).addClass('active');
// Make Ajax call to get data to display...
});
此外,我正在处理浏览器的后退按钮。每次单击该按钮并且URL中的选项卡哈希值发生更改时,相应的选项卡都会被激活并检索其数据:
jQuery - onhashchange
$(window).on('hashchange', function() {
var hash = $.trim(window.location.hash);
var $link = $('li a[href="' + hash + '"]');
if ($link.length) {
$link.trigger('click'); // Pass the flow to onclick handler
}
});
后退按钮工作正常。问题是,当点击标签时,两个事件(onclick
和onhashchange
)都会被触发,这会导致Ajax调用两次
如果单击选项卡,如何阻止onhashchange
?
答案 0 :(得分:1)
如果单击选项卡,如何防止onhashchange?
唐&#39;吨
而是让hashchange处理程序始终发送ajax请求。
// Click on anchor automatically triggers hashchange
$('li a').on('click', function(e) {
$(this).addClass('active');
});
// hashchange is triggered by both clicks and back button
$(window).on('hashchange', function() {
// Make ajax call to fetch content for location.hash
} );