Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][Java][HTML]Tabs bootstrap4
matti9410
post 21.03.2019, 20:28:12
Post #1





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 10.07.2013

Ostrzeżenie: (0%)
-----


Witam,
Mam problem ze zrobieniem górnego menu. Mianowicie tabsy nie działają jak trzeba. Karty z podmenu wyswietlaja sie dwa na raz zamiast osobno po kliknieciu odpowiedniego przycisku.
Kod

  1. <div class="container-fluid">
  2. <div class="row">
  3. <div class="col-xl-3">
  4. <div class="col-xl-12">
  5. <div class="card card-body white tab">
  6. <h3>Menu</h3>
  7. <div class="nav flex-column nav-pills" id="myTab" role="tablist" aria-orientation="vertical">
  8. <a class="nav-link color-dark active" id="services-tab" data-toggle="tab" href="#services" role="tab" aria-controls="services" aria-selected="true">menu1</a>
  9. <a class="nav-link color-dark " id="offer-tab" data-toggle="tab" href="#offer" role="tab" aria-controls="offer" aria-selected="false">menu2</a>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. <div class="col-xl-9">
  15. <div class="tab-content">
  16. <div class="tab-pane fade show active" id="services" role="tabpanel" aria-labelledby="services-tab">
  17. menu1
  18. <div class="col-xl-12">
  19. <div class="card card-body white">
  20. <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
  21. <a class="nav-item nav-link active" id="add-services-tab" data-toggle="pill" href="#add-services" role="tab" aria-controls="add-services" aria-selected="true">podmenu1</a>
  22. <a class="nav-item nav-link" id="all-services-tab" data-toggle="pill" href="#all-services" role="tab" aria-controls="all-services" aria-selected="false">podmenu2</a>
  23. </div>
  24. <div class="tab-pane fade show active" id="add-services" role="tabpanel" aria-labelledby="add-services-tab">
  25. podmenu1
  26. </div>
  27. <div class="tab-pane fade show active" id="all-services" role="tabpanel" aria-labelledby="all-services-tab">
  28. podmenu2
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="tab-pane fade" id="offer" role="tabpanel" aria-labelledby="offer-tab">
  34. menu2
  35. <div class="col-xl-12">
  36. <div class="card card-body white">
  37. <h3>test</h3>
  38. test
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>


  1. $('#myTab a').on('click', function (e) {
  2. e.preventDefault()
  3. $(this).tab('show')
  4. })

Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 10:10