Согласно HTML документам , <a> - это "интерактивный контент" ", если он имеет атрибут href" . Для этого определения в iOS это литерал , а события click игнорируются на якорях без href.
Правильный способ включить клики на собственных устройствах iOS - это использовать id из .tab-pane как href.
Вы можете сделать это вручную или использовать этот фрагмент кода, который просто копирует их из data-target, только на нативные устройства iOS и только если якорь еще не имеет атрибута 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 ответ .