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

Question

[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');

Comments

[mipfikus]

Проблема то в чём?

[Blind-programmer]

mipfikus, Здравствуйте, Но я же оставлял ссылку например, карточки bootstrap не правильно выводятся, то есть выводится контент всех карточек, вместо одной

[Blind-programmer]

mipfikus, увы но я не вижу Вашь последний комент, на почту пришёл анонс, а тут его нету.

[mipfikus]

Bogdan Ustianski, Да, так и есть. Я не правильно понял ваш вопрос, и написал вам точно неподходящий ответ. Простите за спам на почту :D
А ниже вам уже ответили, удачи!

[Blind-programmer]

mipfikus, Да всё нормально, Всё равно спасибо, Рад был пообщаться

[mipfikus]

Bogdan Ustianski, И вам спасибо, пока пытался помочь, поиграл в зоопарк :D

Answer 1

[Павел Чесноков]

Могу предположить, что вы хотели бы видеть "карточки" со стилями 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>
...

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

Comments

[Blind-programmer]

Привет, Спасибо огромное, я контейнеры добавил кокоду, А вы можете помочь с этими ошибками? Буду благодарен.

[Павел Чесноков]

Для начала отключите плугин "WP-Recall", далее смотрите какие новые ошибки будут.

[Blind-programmer]

Павел Чесноков, ничего не изменилось

[Blind-programmer]

Павел Чесноков, а как эть все задать к этому коду?
Для цыкла
WORDPRESS

[Павел Чесноков]

Я могу только советом помочь. Видимо вам ещё и программист нужен, который напишет корректный код.