Как загрузить указанный фрагмент c после клика? - PullRequest
Новая
       1

Как загрузить указанный фрагмент c после клика?

1 голос
/ 15 января 2020

Я новичок в тимелист. Я пытаюсь загрузить указанный c div после клика. Вот мое демо: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    
<body>
    <ul class="list-unstyled components mb-5">
        <li >
            <a href="#"><span class="fas fa-sign-in-alt mr-3"></span> load fragment 1</a>
        </li>
        <li class="active">
            <a href="#"><span class="fa fa-database mr-3"></span> load fragment 2</a>
        </li>
        <li >
            <a href="#"><span class="fa fa-user mr-3"></span> load fragment 3</a>
        </li>
    </ul>
    
    <div th:if="#{  ?  }">
        <div th:replace="admin/fragment1.html :: fragment1"></div>
    </div>
    <div th:if="#{  ?  }">
        <div th:replace="admin/fragment2.html :: fragment2"></div>
    </div>
    <div th:if="#{  ?  }">
        <div th:replace="admin/fragment3.html :: fragment3"></div>
    </div>
</body>

Если вы посмотрите на код, вы, вероятно, поймете мою идею, но я не уверен, возможно ли это таким образом?

Я хочу загрузить фрагмент1, если кнопка 1 активна, фрагмент2, если кнопка2 активна. Ребята, как это проверить? Я пытаюсь, но ничего не работает.

1 Ответ

2 голосов
/ 15 января 2020

Это похожее поведение, которое вы ищете

https://getbootstrap.com/docs/4.3/components/collapse/#accordion - пример

С Bootstrap Сайт 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample" style="">
      <div class="card-body">
        Section 1 expansion 
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample" style="">
      <div class="card-body">
         Section 2 expansion
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample" style="">
      <div class="card-body">
                Section 3 expansion

      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...