Использование php для нахождения первого элемента массива и добавления его к классу active для создания системы вкладок с bootstrap.js

Question

Я бы хотел добавить активный класс с PHP вместо использования JavaScript.

Но я, вероятно, где-то нарушил код.

Я использую bootstrap.js версии 3 и яя создаю свои вкладки с помощью PHP, потому что мне нужно использовать свои вкладки на панели управления в моем приложении.

Так что, по сути, я до сих пор не добавил ни javascript, ни jquery, я просто использую встроенные функциидля вкладок в bootstrap.js (и jquery):

<?php foreach ($database as $item): ?>
    <?php
    if (isset($item['associations'])) {
        foreach ($item['associations'] as $value) {

            echo "<div class='modal' id='des_" . $value['des_id'] . "'>";
            echo "<div class='modal-sandbox'></div>";
            echo "<div class='modal-box'>";
            echo "<div class='modal-body'>";
            echo "<div class='close-modal'>&#10006;</div>";
            echo "<h3>Credit and values</h3>";
            echo "<h5>" . $value["designation_name"] . " - Credit: " . $value["designation_credits"] . "</h5>";
            echo "<ul class='nav nav-pills'>";

            if (isset($value['credits']) && !is_string($value['credits'])) {
                foreach ($value['credits'] as $credits) {
                    $first_element = reset($value["credits"]);
                    if (isset($value['credits'])) {
                        if ($first_element[4] == $credits[4]) {
                           echo "<li class='active'><a href='tab_" . $credits[4] . "' data-toggle='tab'>Identifier: " . $credits[0] . "</a></li>";
                        } else {
                            echo "<li><a href='tab_" . $credits[4] . "' data-toggle='tab'>Identifier: " . $credits[0] . "</a></li>";
                        }

                    }
                }
            }
            echo "</ul>";

            echo "<div class='tab-content clearfix'>";
            if (isset($value['credits']) && !is_string($value['credits'])) {
                foreach ($value['credits'] as $credits) {

                    if (isset($value['credits'])) {
                        if ($first_element[4] == $credits[4]) {
                            echo "<div class='tab-pane active' id='tab_" . $credits[4] . "'>";
                        } else {
                            echo "<div class='tab-pane' id='tab_" . $credits[4] . "'>";
                        }
                        echo "<div class='single-credit'>";
                        ?>
                        <?=form_open();?>
                        <?php
                        echo "<input type='hidden' name='id' value='" . $credits[4] . "'>";
                        echo "<div>Identifier: <span>" . $credits[0] . "</span></div>";

                        echo "<input name='edit_credits' type='submit' value='Edit' class='submit'>";

                        echo "</div>";
                        echo "</div>";
                        echo "</div>";
                        ?>
                        <?=form_close()?>
                        <?php
                    }
                }
            }
            echo "</div>";
            echo "</div>";
            echo "</div>";
            echo "</div>";
        }
    }
    ?>
<?php endforeach;?>

Чтобы объяснить мой код, я начну со списка:

Поскольку это действительно сложный массив, я беру первыйэлемент с функцией сброса для добавления активного класса только к этому самому элементу.

Затем я добавил элемент href, чтобы указать на идентификатор соответствующего div, а затем закрыл свой список.

Позже я создаю еще один цикл и использую идентификатор для сопоставления как списка, так и элемента div, и я использовал трюк, который использовал ранее, чтобы добавить активный класс только в мой первый элемент моего массива.

все работает кроме фактачто, если я щелкну по другому элементу списка, соответствующий div не будет работать, самый первый элемент массива сохранит класс активным, поэтому я не могу переключиться между элементами.

Мне нужноНайдите ошибку.

ОБНОВЛЕНИЕ:

Проблема, с которой я столкнулся при работе с jquery, в данном случае заключается в том, что, если я использую, например, toogleClass, вот так:

$(".nav-pills li").click(function(e) {
  e.preventDefault();
  tab = $(this).find('a').attr('href');
  $("#" + tab).toggleClass('active');
});

Он не сможет правильно переключать класс первого элемента, того, к которому я добавил активный класс с php.

Answer 1

Я думаю, что вы пропускаете изменение URL при нажатии на него, в бэкэнде (PHP) вам нужно знать, где находится пользователь, поэтому вы проверяете «параметр» и отмечаете активную или нет текущую вкладку.

Например:

printf("<div class='tab-pane %s' id='...'>", $credits[4] == $_GET['tab'] ? 'active':'');