@Blind-programmer

В чём может быть ошибка?

Всех приветствую, можете плис помочь,
ссылка на проблему:
https://www.blind-programming.com.ua/games
Сам код:
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-right" id="myTab" role="tablist">
<?php if ( have_posts() ) :
$idx = 1;
while ( have_posts() ) :
the_post();
if ( $idx == 1 ) :
echo '<li class="nav-item"><a class="nav-link active" id="tab'.$idx.'" data-toggle="tab" href="#tab'.$idx.'" role="tab" aria-controls="tab'.$idx.'" aria-selected="true">';
else :
echo '<li class="nav-item"><a class="nav-link" id="tab'.$idx.'" data-toggle="tab" href="#tab'.$idx.'" role="tab" aria-controls="tab'.$idx.'" aria-selected="false">';
endif;
the_title();
echo '</a></li>';
$idx += 1;
endwhile;
endif; ?>
</ul>
</div>

<div class="card-body">
<div class="tab-content" id="myTabContent">
<?php if ( have_posts() ) :
$idx = 1;
while ( have_posts() ) :
the_post();
if ( $idx == 1 ) :
echo '<div class="tab-pane fade show active" id="tab'.$idx.'" role="tabpanel" aria-labelledby="tab'.$idx.'">';
else :
echo '<div class="tab-pane fade show" id="tab'.$idx.'" role="tabpanel" aria-labelledby="tab'.$idx.'">';
endif;
the_excerpt();
echo '<a href="';
the_permalink();
echo '">Читать далее</a></div>';
endwhile;
endif; ?>
</div></div></div>

functions.php
function new_scripts() {
	// Styles
	wp_enqueue_style( 'bootstrap-style', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1' );

	// Scripts
	wp_enqueue_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery' ), '1.14.7', true );
	wp_enqueue_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ), '4.3.1', true );
}
add_action( 'wp_enqueue_scripts', 'new_scripts' );

function my_jquery_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.5.1.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action( 'wp_enqueue_scripts', 'my_jquery_scripts');
  • Вопрос задан
  • 174 просмотра
Решения вопроса 1
cesnokov
@cesnokov
<head>&nbsp;</head>
Могу предположить, что вы хотели бы видеть "карточки" со стилями Bootstrap... Не все стили применяются потому, что нет полной структуры контейнеров:
<div class="container"><div class="row"><div class="col">
...
</div></div></div>

А не переключаются карточки из за того, что есть ошибки в коде и выполнение JavaScript'a останавливается не дойдя до файла bootstrap.min.js.

2020.07.09, Далее исправьте ошибки:

ID кнопок навигации не должно совпадать с ID панелей.
На всех кнопках надо поменять например так: id="tab1" на id="btn1", id="tab2" на id="btn2",
<li class="nav-item"><a class="nav-link active" id="btn1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">игра тир</a></li>


ID панелей надо также поменять, ибо они все одинаковые, id="tab2", id="tab3" и т.д.
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2"><p>Встречайте настоящую революцию в жанре приключенческих игр для мобильных! В эту игру надо не играть, это целый мир, в котором можно жить! Чтобы защитить свою родную деревню Вам придётся отправиться в опасное путешествие по извилистым дорогам сказочной страны полной опасностей. Спасая деревню Вам предстоит узнать много неожиданных вещей и распутать глобальные заговоры в попытках поработить …</p>
<a href="https://www.blind-programming.com.ua/stran_mobi.html">Читать далее</a></div>


Активной и открытой должна быть только одна панель. Уберите лишние классы "show" и "active" со всех панелей кроме первой:
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1"> ... </div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2"> ... </div>
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3"> ... </div>
...


И будет всё работать...

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы