Сделайте вкладку активной с Bootstrap, используя Javascript, Thymeleaf - PullRequest
Новая
       58

Сделайте вкладку активной с Bootstrap, используя Javascript, Thymeleaf

0 голосов
/ 19 марта 2020

Я программирую веб-сайт, и я работал над некоторыми bootstrap учебными пособиями, и я видел Список группы , что очень круто.

В конце они показывают, как реализовать эту «активную» функцию. Я пытался, но я не мог заставить это работать.

Может быть, вы, ребята, теперь, как это сделать ...

У меня также есть кое-что в JavaScript, но это не работает . 

<!doctype html>
<html lang="en"
      th:replace="~{mopslayout :: html(name='Klausurzulassung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <th:block th:fragment="headcontent">

        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

        <link href="../static/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
              th:href="@{node_modules/bootstrap/dist/css/bootstrap.min.css}">

    </th:block>
    <title>Base Template</title>
</head>

<body>
<header>
    <nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
        <div class="list-group" id="myList" role="tablist">
            <span sec:authorize="hasRole('orga')">
                <a class="list-group-item list-group-item-action active" data-toggle="list"
                   href="#zulassungsliste" role="tab" th:href="@{/zulassung2/orga/upload-csv}">Zulassungsliste
                    hochladen</a>
            </span>
            <span sec:authorize="hasRole('orga')">
                <a class="list-group-item list-group-item-action" data-toggle="list" href="quittungenValidieren"
                   role="tab" th:href="@{/zulassung2/orga/upload-receipt}">Quittungen validieren</a>
            </span>
            <span sec:authorize="hasRole('studentin')">
                <a class="list-group-item list-group-item-action" data-toggle="list" href="studiseite"
                   role="tab" th:href="@{/zulassung2/studi}">Studiseite</a>
            </span>
        </div>
    </nav>
</header>

<script>
    $(function () {
        console.log('ready');

        $('.list-group span').click(function (e) {
            e.preventDefault()

            $that = $(this);

            $that.parent().find('li').removeClass('active');
            $that.addClass('active');
        });
    })

</script>

<main th:fragment="bodycontent">
    <div th:replace="${content} ?: ~{}"></div>
</main>

</body>
</html>
...