0

У меня есть табы созданные с помощью bootstrap. image Я хочу что бы количество табов зависело от того сколько я добавил в бд. Я добавил таблицу в бд с id и tabs то есть название таба. image У меня все табы выводятся только разметка теряется! image

В function.php создаю подключение к бд и чтение из бд

<?php

include 'config/config.php';

$get_id = $_GET['id'];
$get_tabs = $_GET['tabs'];

//Read
$sql = $pdo->prepare("SELECT * FROM x_tabs");
$sql->execute();
$result = $sql->fetchAll(PDO::FETCH_OBJ);

А в индексном файле создаю табы таким образом

<?php foreach ($result as $res) { ?>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="<?php echo $res->id; ?>" data-toggle="tab" href="#<?php echo $res->tabs; ?>" role="tab" aria-controls="<?php echo $res->tabs; ?>" aria-selected="true"><?php echo $res->tabs; ?></a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
</div>
<?php } ?>

Правленый код

<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php foreach ($result as $res) { ?>
    <li class="nav-item">
      <a class="nav-link" id="<?= $res->id; ?>" data-toggle="tab" href="#<?= $res->tabs; ?>" role="tab" aria-controls="<?= $res->tabs; ?>" aria-selected="true"><?= $res->tabs; ?></a>
    </li><?php } ?>
</ul>

<div class="tab-content" id="myTabContent">
<?php foreach ($result as $res) { ?>
  <div class="tab-pane fade show active" id="<?= $res->id; ?>" role="tabpanel" aria-labelledby="<?= $res->tabs; ?>"><?= $res->tabs; ?></div>
  </li><?php } ?>
</div>

Результат введите сюда описание изображения

4
  • 2 foreach'а надо: первый для li, второй для div.tab-pane
    – InDevX
    4 июн 2021 в 19:45
  • div.tab-pane я пока не вывожу вообще, проблема в том что все табы криво выводятся
    – FANTIK
    4 июн 2021 в 19:49
  • Конечно криво.. Вы дублируете ul + li, а надо только li
    – InDevX
    4 июн 2021 в 19:50
  • Я так понимаю происходит это из за того что у меня <a class="nav-link active" то есть все вкладки активные.
    – FANTIK
    4 июн 2021 в 20:12

1 ответ 1

0

Только li должны быть внутри foreach

<ul class="nav nav-tabs" id="myTab" role="tablist"><?php 
  foreach ($result as $idx => $res) { ?>
    <li class="nav-item">
      <a class="nav-link <?= $idx === 0 ? 'active' : ''?>" id="<?= $res->id; ?>" data-toggle="tab" href="#<?= $res->tabs; ?>" role="tab" aria-controls="<?= $res->tabs; ?>" aria-selected="true"><?= $res->tabs; ?></a>
    </li><?php 
  } ?>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
</div>
15
  • Таким образом они не переключаются
    – FANTIK
    4 июн 2021 в 19:55
  • Добавьте tab-pane тогда поговорить можно о переключении
    – InDevX
    4 июн 2021 в 19:56
  • добавил код в вопрос
    – FANTIK
    4 июн 2021 в 19:59
  • Я так понимаю происходит это из за того что у меня <a class="nav-link active" то есть все вкладки активные
    – FANTIK
    4 июн 2021 в 20:22
  • Возможно. Не знаю как данные вкладки работают. Обновил - теперь класс active добавляется только первому эл-ту
    – InDevX
    4 июн 2021 в 20:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.