一个 href"#" 数据切换锚点到顶部答案

【问题标题】：A href"#" data-toggle anchor goes to the top一个 href"#" 数据切换锚点到顶部
【发布时间】：2020-06-08 22:26:08
【问题描述】：

我接手了一个重新设计的项目，他们要求我修复用户在 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>

【问题讨论】：

我假设您不是指实际的重新加载，您只是指跳转到顶部的页面？
哦，是的，我忘了更改它。 :)
对于onClick="changeTab(event)"，您依赖于全局event 对象的存在，但这在Firefox 中不是给定的。 developer.mozilla.org/en-US/docs/Web/API/Window/event
在这里做正确的 jQuery 事件处理程序绑定，而不是使用“老派”的 HTML 属性——然后你就不必处理这样的事情了。
$( "tablink" ) 尝试查找<tablink>。请改用$('#tablink')。

标签： javascript html wordpress

【解决方案1】：

要让 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
    });
});

【讨论】：

【解决方案2】：

以下适用于所有浏览器不再进入顶部：

<a href="#!">Anchor</a>

【讨论】：

【解决方案3】：

使用 JQuery 回调来避免事件对象问题

<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>

【讨论】：