我接手了一个重新设计样式的项目，他们要求我修复用户在Firefox中发送到顶部的选项卡的锚:http://new.yourcoach.be/opleidingen/nlp-bootcamp/
它在Chrome浏览器中很有魅力，但在其他浏览器中则不然
<script>function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;" onClick="changeTab(event)"><?php echo $tab['_title']; ?> </a>
我尝试了以下操作，但没有成功:
<a href="javascript:void(0);">Anchor</a>
<a href="#" rel="no-refresh">Anchor</a>
<a href="#" onclick="return false;">Anchor</a>
<script>
$( "tablink" ).click(function() {
e.preventDefault();
console.log("Changing tab");
})(jQuery);
</script>
<a id="tablink" href="#">Anchor</a>
解决方案
<a href="#!">Anchor</a>
要让html元素激发javascript事件，可以使用元素的onclick属性，并直接在属性中输入javascript函数:
# html
<a href="#" onClick="changeTab(event)">Example</a>
# javascript
function changeTab(e) {
e.preventDefault();
// do things
}
或者，您也可以在javascript中通过挂接所有与某个选择器匹配的元素来执行此操作。 这是首选的方法，因为它没有混合html和javascript，这样更容易理解什么影响什么。
# html
<a href="#" class="js-change-tab">Example</a>
# javascript
document.querySelectorAll('.js-change-tab').forEach( a => {
a.addEventListener('click', e => {
e.preventDefault();
// do things
});
});
以下内容适用于所有浏览器，不再转到顶部:
<a href="#!">Anchor</a>
使用JQuery回调避免事件对象问题
null
<script>
function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}
$(document).on("click", ".nav-link", changeTab);
</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;"><?php echo $tab['_title']; ?> </a>