JavaScript 选项卡不会在移动设备上切换，但在桌面上运行良好

Question

我是 JavaScript 的初学者。 我在我的网站上嵌入了一个选项卡功能，它似乎在桌面上运行良好，但是，在移动设备上查看网站时，该选项卡拒绝切换。 它只显示默认打开的选项卡，但不会导航到其他选项卡。

我将非常感谢任何有知识的人在解决这个问题时提供的帮助。 这是我的代码！

function openPage(pageName, elmnt, color) {
  // Hide all elements with class="tabcontent" by default */
  let i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName('tabcontent');
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none';
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName('tablink');
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = '';
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = 'block';

  // Add the specific color to the button used to open the tab content
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById('defaultOpen').click();

Answer 1

您网页上的另一个元素可能是在移动设备上获取点击事件。 可以肯定的是，打开浏览器的开发者工具，在控制台window.addEventListener('click', e => {console.log(e.target)});运行window.addEventListener('click', e => {console.log(e.target)}); 这将告诉您哪个元素获得了点击事件。

然后，一旦你知道是什么元素引发了事件，你只需要找出原因。 可能您需要使选项卡的可点击区域更大。

如果您发布完全可重现的代码示例，我们可以帮助您深入了解！ 例如，您可以使用 StackOverflow 中的 html 页面创建器来重现您网站的选项卡部分，我们可以帮助调试网站的该部分...

Answer 2

好吧，经过几个小时的调试，我发现了错误。 问题出在我的样式表上。 我在选项卡链接上使用 left-float 而不是 display-flex。 感谢您的投入 Duhaime，非常感谢！