Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX]jQuery podstrony na divach tzw. tab., jak zmodyfikować to?
casperii
post
Post #1





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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


Witam, mam kod, który działa, lecz chciałbym go zmodyfikować i nie bardzo wiem jak.
  1. .tab {
  2. display:block;
  3. }
  4. .tab.active,
  5. .tab:hover {
  6. }
  7. .content {
  8. display:none;
  9. clear:both;
  10. background:#FFF;
  11. padding:20px;
  12. }
  13. .content.active {
  14. display:block;
  15. }
  16.  
  17. $(function () {
  18.  
  19. $('[data-tab]').on('click', function (e) {
  20. $(this)
  21. .addClass('active')
  22. .siblings('[data-tab]')
  23. .removeClass('active')
  24. .siblings('[data-content=' + $(this).data('tab') + ']')
  25. .addClass('active')
  26. .siblings('[data-content]')
  27. .removeClass('active');
  28. e.preventDefault();
  29. });
  30.  
  31. });

  1. <div data-tab="1" class="tab active"><a href="#">Tab 1</a></div>
  2. <div data-tab="2" class="tab"><a href="#">Tab 2</a></div>
  3. <div data-tab="3" class="tab"><a href="#">Tab 3</a></div>
  4. <div data-tab="4" class="tab"> <a href="#">Tab 4</a></div>
  5. <div data-tab="5" class="tab"><a href="#">Tab 5</a></div>
  6.  
  7. <div data-content="1" class="content active">Tab 1 Content</div>
  8. <div data-content="2" class="content">Tab 2 Content</div>
  9. <div data-content="3" class="content">Tab 3 Content</div>
  10. <div data-content="4" class="content">Tab 4 Content</div>
  11. <div data-content="5" class="content">Tab 5 Content</div>


Chciałbym, teraz włożyć część pierwszą divów w dwa divy. Czyli takie coś:

  1. <div><div>
  2. <div data-tab="1" class="tab active"><a href="#">Tab 1</a></div>
  3. <div data-tab="2" class="tab"><a href="#">Tab 2</a></div>
  4. <div data-tab="3" class="tab"><a href="#">Tab 3</a></div>
  5. <div data-tab="4" class="tab"> <a href="#">Tab 4</a></div>
  6. <div data-tab="5" class="tab"><a href="#">Tab 5</a></div>
  7. </div></div>
  8. <div data-content="1" class="content active">Tab 1 Content</div>
  9. <div data-content="2" class="content">Tab 2 Content</div>
  10. <div data-content="3" class="content">Tab 3 Content</div>
  11. <div data-content="4" class="content">Tab 4 Content</div>
  12. <div data-content="5" class="content">Tab 5 Content</div>


Proszę teraz o pomoc w JS tak by mi działało. Dodawanie / usuwanie klasy.
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 17.09.2025 - 10:31