时间戳

首页 > 解决方案 > JavaScript 选项卡无法在移动设备上切换，但在桌面设备上运行良好

javascript - JavaScript 选项卡无法在移动设备上切换，但在桌面设备上运行良好

问题描述

我是 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();

标签： javascripttabs

解决方案

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

推荐阅读