Вопрос или проблема
Я пытаюсь показать содержимое вкладок Bootstrap в цикле WordPress. Вкладки не кликаются.
Вот коды Bootstrap:
<ul class="citenav nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab1" aria-selected="true">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab2" aria-selected="false">tab2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab3" aria-selected="false">tab3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab4" aria-selected="false">tab4</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="cite tab-pane fade show active" id="tab1-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab1-tab">
<?php echo "содержимое вкладки 1"; ?>
</div>
<div class="cite tab-pane fade" id="tab2-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab2-tab">
<?php echo "содержимое вкладки 2"; ?>
</div>
<div class="cite tab-pane fade" id="tab3-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab3-tab">
<?php echo "содержимое вкладки 3"; ?>
</div>
<div class="cite tab-pane fade" id="tab4-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab4-tab">
<?php echo "содержимое вкладки 4"; ?>
</div>
</div>
<style>
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #495057;
background-color: #fff;
border-color: #ddd #ddd #fff;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
.nav-link {
display: block;
padding: .5rem 1rem;
}
</style>
Также обратите внимание, что эти коды используются как части шаблона. Я пробовал это в шаблоне повторителя Ajax load more, и тогда вкладки работали.
ОБНОВЛЕНИЕ: Добавление внешней ссылки на JQuery только что решило проблему.
Я думаю, что причина в том, что Bootstrap использует document.on(‘click’, ‘selector’, function).
Это означает, что функция будет выполняться только когда событие клика достигнет узла документа.
Я протестировал, и если у вас есть родительский элемент, который не распространяет событие ‘click’, то это может быть причиной того, почему ваш код не работает…
Например:
parentNodeOfTab.on( 'click', function(){
// Код
return false;
} );
или
parentNodeOfTab.on( 'click', function( event){
event.stopPropagation();
// Код
} );
П.С: Вы можете загуглить и почитать больше о распространении событий в JavaScript.
Ответ или решение
Ответ на вопрос о кликах по вкладкам Bootstrap в WordPress
Ваша проблема с вкладками Bootstrap, которые не реагируют на клики в цикле WordPress, может быть связана с несколькими факторами. Давайте рассмотрим шаги, которые помогут вам устранить эту проблему.
1. Проверьте загрузку jQuery и Bootstrap
Первое, что следует проверить, это правильная загрузка библиотек jQuery и Bootstrap. Убедитесь, что jQuery загружается перед Bootstrap, так как Bootstrap зависит от jQuery. Если вы используете локальные файлы, проверьте, что пути к ним указаны правильно.
Для подключения jQuery и Bootstrap в WordPress вы можете использовать следующие функции:
function enqueue_bootstrap() {
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js', array('jquery'), null, true);
wp_enqueue_style('bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');2. Правильная настройка атрибутов данных
Убедитесь, что атрибуты data-toggle="tab" и href для каждой вкладки правильно настроены. Ваша разметка уже использует функцию get_the_ID(), что хорошо. Убедитесь, что идентификаторы не дублируются в рамках одной страницы. Например:
<a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab1" aria-selected="true">tab1</a>3. Проблемы с всплытием событий
Как вы заметили, может быть проблема, связанная с тем, что события клика не доходят до элементов вкладок из-за их родительских элементов. Убедитесь, что нет родительских элементов, которые блокируют всплытие событий. Например, если у вас есть обработчик событий на родительском элементе, который вызывает event.stopPropagation(), это может мешать нормальной работе вкладок.
Пример:
$('.parent-node-of-tab').on('click', function() {
event.stopPropagation();
// Ваш код
});Убедитесь, что вы не используете такие паттерны без необходимости.
4. Используйте jQuery для инициализации вкладок
Если вкладки все еще не работают, вы можете явно инициализировать их с помощью jQuery:
jQuery(document).ready(function($) {
$('a[data-toggle="tab"]').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
});Убедитесь, что этот код загружается после загрузки jQuery и Bootstrap.
5. Изолированное тестирование
Попробуйте вставить ваш код вкладок вне цикла WordPress, чтобы проверить, работает ли он там. Если он работает, значит проблема в том, как ваш код организован внутри цикла.
Заключение
Применив все вышеперечисленные советы, вы должны быть в состоянии устранить проблему с несрабатыванием вкладок в вашем WordPress. Не забудьте протестировать изменения и убедиться, что все зависимости загружены и работают правильно. Если проблема сохраняется, возможно, есть дополнительные конфликты с другими скриптами или стилями на вашей странице.