Question

使用Bootstrap 4.1并使用文档中的示例，只需将“ href”切换为“数据目标”即可。

示例

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>

选项卡在我尝试过的所有台式机浏览器（包括Safari）以及我尝试过的所有Android浏览器上都可以正常工作。

但是，在所有iOS设备上，选项卡都处于非活动状态，也就是说，它们都没有切换，选项卡链接或显示的内容都没有。

任何人都知道我在做什么错，或者这是否是Bootstrap 4.1中的错误？

Answer 1

根据HTML docs，<a>是“交互式内容” “如果它具有href属性” 。此定义的iOS实现是 literal ，并且在没有click的锚点上将忽略href个事件。

在iOS本机设备上启用点击的正确方法是将id中的.tab-pane用作href。
您可以手动执行此操作，也可以使用此lil的代码段，仅从data-target复制它们，仅在本机iOS设备上，并且仅当锚点尚未包含{{1} }属性。
我尚未在iOS设备上对其进行过测试，但它应该可以工作：

href

请注意，所有Bootstrap 4选项卡示例都使用$(window).on('load', () => { let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); if (iOS) $('[role="tablist"] .nav-link').each((i,e) => { if (!$(e).attr('href')) $(e).attr('href', $(e).data('target')); }) })属性。在询问或报告潜在的Bootstrap“错误”之前，请确保您的标记有效，并且与Bootstrap文档示例相比没有任何遗漏。

这是使用您的标记的测试：

href

$(window).on('load', () => {
  let iOSdevice = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
  if (iOSdevice)
    $('[role="tablist"] .nav-link').each((i,e) => {
      if (!$(e).attr('href'))
        $(e).attr('href', $(e).data('target'))
    })
})

为了进行iOS检测，我使用了SO answer。

Bootstrap 4标签在iOS上无法使用“数据目标”而不是“ href”属性

示例

1 个答案: