Merhaba arkadaşlar, yapmış olduğum bir proje için düzenlemiş olduğum bootstrap tab menü vardı. Sizlerinde işine yarayacağını düşündüm bu nedenle sizlerle paylaşmak istedim. Tab menüyü silerder haline getirdim, umarım işinize yarar başarılar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <title>Çağlar Bostancı Bootstrap Tab Panel Örneği</title> <meta name="description" content="Çağlar Bostancı Bootstrap Tab Panel Örneği" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .tabLi a.nav-link{ background:#999; color:white; font-weight: bold; } .tabLi a.nav-link.active{ background:#333; color:white; } .tabSoruCozum{ display: none; } </style> </head> <body> <div class="container mt-3"> <h2>Çağlar Bostancı Bootstrap Tab Panel Örneği</h2> <br> <!-- Nav tabs --> <ul class="nav nav-tabs tabLi"> <li class="nav-item"> <button class="nav-link bg-info text-white tabGeri"><strong><</strong></button> </li> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab-1">1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-2">2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-3">3</a> </li> <li class="nav-item"> <button class="nav-link bg-info text-white tabIleri"><strong>></strong></button> </li> </ul> <!-- Tab panes --> <div class="tab-content tabContainer"> <div id="tab-1" class="container tab-pane active"><br> <img width="100%" src="https://caglarbostanci.com.tr/wp-content/uploads/2017/12/caglarbostanci-com-tr-background-opacity-2-min-1.jpg"> </div> <div id="tab-2" class="container tab-pane"><br> <img width="100%" src="https://caglarbostanci.com.tr/wp-content/uploads/2017/04/arkaplan.jpg"> </div> <div id="tab-3" class="container tab-pane"><br> <img width="100%" src="https://caglarbostanci.com.tr/wp-content/uploads/2017/02/caglarbostanci.com_.tr-php-cikti-tamponlama.png"> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(e){ $('.tabIleri').click(function(){ var tabNumber=$('.tabContainer div.active').index(); var topPanel=$('.tabContainer div.tab-pane').length; tabNumber++; if(tabNumber>=topPanel){ tabNumber=0; } $("div.tab-pane").removeClass("active").addClass("fade"); $("div.tab-pane").eq(tabNumber).removeClass("fade").addClass("active"); $("ul.tabLi li a[data-toggle='tab']").removeClass("active").eq(tabNumber).addClass("active"); }); $('.tabGeri').click(function(){ var tabNumber=$('.tabContainer div.active').index(); var topPanel=$('.tabContainer div.tab-pane').length; tabNumber--; if(tabNumber<0){ tabNumber=topPanel-1; } $("div.tab-pane").removeClass("active").addClass("fade"); $("div.tab-pane").eq(tabNumber).removeClass("fade").addClass("active"); $("ul.tabLi li a[data-toggle='tab']").removeClass("active").eq(tabNumber).addClass("active"); }); }); </script> </body> </html> |