ios - Bootstrap 4 选项卡在 iOS 上无法使用 "data-target"而不是 "href"属性

Question

使用 Bootstrap 4.1 并使用文档中的示例，只需将“href”切换为“data-target”。

• > https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior
• > http://jsfiddle.net/aq9Laaew/70683/

例子

<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 的 anchor 会忽略事件.

在 iOS 原生设备上启用点击的正确方法是使用 id的 .tab-pane作为href .
你可以手动完成，也可以使用这个 lil' 片段，它只是从 data-target 复制它们。 , 仅在 native iOS 设备上 并且仅当 anchor 还没有 href 时属性。
我还没有在 iOS 设备上测试过它，但它应该可以工作:

$(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 4 选项卡示例都使用 href属性。在询问或报告潜在的 Bootstrap“错误”之前，请确保您的标记有效并且与 Bootstrap 文档示例相比没有遗漏任何内容。

---

这是一个使用您的标记的测试:

$(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'))
    })
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

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

对于 iOS 检测，我使用了这个 SO answer .