login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > jQuery Snippets > Jquery tabbladen snippet

Jquery tabbladen snippet

Auteur: Devimo - 03 februari 2016 - 17:03 - Gekeurd door: Thomas - Hits: 8236 - Aantal punten: (0 stemmen)



Kleine snippet om te werken met verschillende tabbladen (jQuery based), niet geheel perfect maar het werkt wel:)

Veel plezier ermee

Code:
  1. $(document).ready(function()
  2. {
  3. $(".tabs-content").each(function(){
  4. $("div:not(:first)", this).hide();
  5. });
  6. $('#tabs a').click(function()
  7. {
  8. $("#tabs>li.active").removeClass("active");
  9. $(this).parent().addClass("active");
  10. $(".tabs-content").each(function(){
  11. $("div:not(.tabs-content)", this).hide();
  12. });
  13. $($(this).attr('href')).show();
  14.  
  15. return false;
  16. });
  17. });


HTML:
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Tabs</title>
  7. <link rel="stylesheet" href="style.css">
  8. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  9. <script src="tabs.js"></script>
  10. </head>
  11.  
  12. <body>
  13. <ul id="tabs">
  14. <li class="active"><a href="#section1">Scripts</a></li>
  15. <li><a href="#section2">Downloads</a></li>
  16. </ul>
  17. <div class="tabs-content">
  18. <div id="section1">
  19. <h1>Section 1</h1>
  20. <p>This is content in section 1.</p>
  21. </div>
  22. <div id="section2">
  23. <h1>Section 2</h1>
  24. <p>This is content in section 2.</p>
  25. </div>
  26. </div>
  27. </body>
  28.  
  29. </html>


CSS gebruikt voor de demo:
  1. /* tab styles */
  2. ul#tabs
  3. {
  4. list-style: none; border-bottom: 3px solid #ff7100;
  5. width: 95%;
  6. padding: 5px 5px 0px 5px;
  7. overflow: hidden;
  8. }
  9. ul#tabs li.active
  10. {
  11. float: left;
  12. display: block;
  13. padding: 5px;
  14. background-color: #fc8527;
  15. margin: 0px 10px 0px 0px;
  16. border-top-left-radius: 5px;
  17. border-top-right-radius: 5px;
  18. border: 1px solid #ff7100;
  19. border-bottom: 0px;
  20. }
  21. ul#tabs li:hover
  22. {
  23. float: left;
  24. display: block;
  25. padding: 5px;
  26. background-color: #ff7100;
  27. margin: 0px 10px 0px 0px;
  28. border-top-left-radius: 5px;
  29. border-top-right-radius: 5px;
  30. border: 1px solid #fc8527;
  31. border-bottom: 0px;
  32. }
  33. ul#tabs li
  34. {
  35. float: left;
  36. display: block;
  37. padding: 6px 6px 0px 6px;
  38. margin: 0px 10px 0px 0px;
  39. }
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (2)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.013s