html - Jquery Tab - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jquery html css

Bruger #15663 @ 18.11.11 18:34

Hejsa.

Er der nogen der kan være mig behjæælpelige med at få lavet et styk kode der kan bruges til mine tabs?

Jeg har søgt lidt rundt på google, men kan ikke finde andet end jquery-ui og det ville jeg gerne undgå så vidt det er muligt indtil videre.

min html ser således ud

HTML kode

 <div class="bloc">
     <div class="title">
         Brugere
                 <div class="tabs" id="tabs1">
                          <a href="#tab11">Oversigt</a>
                          <a href="#tab22">Ny Bruger</a>
                          <a href="">Blokerede brugere</a>
                 </div>
     </div>
     <div class="content">
                 <div id="tab11" class="tab">
                     <table>
                                  <thead>
                                                  <tr>
                                                         <th><input type="checkbox" class="checkall" /></th>
                                                         <th width="6%">Nummer</th>
                                                         <th>Navn</th>
                                                         <th>Brugernavn</th>
                                                         <th>Aktiv</th>
                                                         <th>Brugergruppe(r)</th>
                                                         <th>Email</th>
                                                         <th>Sidste Besøg</th>
                                                         <th widt="6%">ID</th>
                                                         <th>Handling</th>
                                                 </tr>
                                  </thead>
                                  <tbody>
 </tbody>
                     </table>
                     <div class="pagination">
                              <a href="" class="prev">«</a>
                              <a href="">1</a>
                              <a href="" class="current">2</a>
                              <a href="" class="next">»</a>
                     </div>     
                 </div>
                 <div id="tab22" class="tab">
                 Hej
                      
                 </div>
         </div>

OBS jeg er godt klar over der mangler noget i min HTML, men da det er implementeret i noget php så ville jeg ikke lige sende php-koden med, da den ikke vil gavne noget.

Håber på lidt hjælp.

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #5789 @ 19.11.11 12:40

640

her er lidt at arbejde videre på:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
       <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
       <style type="text/css">
       .tab{display:none;}
       #tab11{display:block;}
       </style>
     <script type="text/javascript">
         $(document).ready(function () {
             $(".tabs a").click(function (event) {
                 event.preventDefault();
                 currentTab = $(this).attr('href');
                 $(".tab").hide();
                 $(currentTab).fadeIn();
             });
         });
     </script>
 </head>
 <body>
     <div class="bloc">
         <div class="title">
             Brugere
             <div class="tabs" id="tabs1">
                 <a href="#tab11">Oversigt</a> <a href="#tab22">Ny Bruger</a> <a href="#tab33">Blokerede brugere</a>
             </div>
         </div>
         <div class="content">
             <div id="tab11" class="tab">
                 <table>
                     <thead>
                         <tr>
                             <th>
                                 <input type="checkbox" class="checkall" />
                             </th>
                             <th width="6%">
                                 Nummer
                             </th>
                             <th>
                                 Navn
                             </th>
                             <th>
                                 Brugernavn
                             </th>
                             <th>
                                 Aktiv
                             </th>
                             <th>
                                 Brugergruppe(r)
                             </th>
                             <th>
                                 Email
                             </th>
                             <th>
                                 Sidste Besøg
                             </th>
                             <th widt="6%">
                                 ID
                             </th>
                             <th>
                                 Handling
                             </th>
                         </tr>
                     </thead>
                     <tbody>
                     </tbody>
                 </table>
                 <div class="pagination">
                     <a href="" class="prev">«</a> <a href="">1</a> <a href="" class="current">2</a>
                     <a href="" class="next">»</a>
                 </div>
             </div>
             <div id="tab22" class="tab">
                 Opret 
             </div>
             <div id="tab33" class="tab">
                 Blokerede
             </div>
         </div>
 </body>
 </html>

Bruger #5789 @ 20.11.11 10:33

640

Jeg kan ikke lige teste fra tlf men:

$(".tabs a:first").addClass("active"); //formoder den css3 regel fungere
$(".tab").hide();
$(".tabs a").click(function (event) {
event.preventDefault();
currentTab = $(this).attr('href');
$(".tab").hide();
$(currentTab).show();
//sætter current anchor
$(".tabs a").removeClass("active"); //fjernet alle active links
$(this).addClass("active") // $(this) er = det aktive link der er trykket på. Tilføjer active class til denne.
});

Bruger #15663 @ 19.11.11 17:21

415

Super den skabte funktionen.

Nu skal jeg bare have tilføjet så den starter med at tilføje class'en acvtive til den første .tabs a. (det kan jeg sagten få lavet.
Men når der så klikkes på en anden a så skal den sørge få at den får class active.

Her er hvad jeg har indtil videre, er gået helt i stå.

JScript kode

 $(".tabs a:first").addClass("active");
     $(".tab").hide();
     $(".tabs a").click(function (event) {
                    event.preventDefault();
                      currentTab = $(this).attr('href');
                    $(".tab").hide();
                      $(currentTab).show();
     });

Jeg ved godt jeg skal have den der document på, den er sat på, da dette kun er et udklip af min samlede Jquery.

Hvordan kommer jeg videre?

Bruger #15663 @ 20.11.11 17:31

415

Hej Jokke.

Tusind tak for den dejlige kode.

Dog løste jeg selv problemet med at den gemte alle .tab ved at indsætte $(".tab:first").show();

JScript kode

 $(".tabs a:first").addClass("active"); //formoder den css3 regel fungere
 $(".tab").hide();
 $(".tab").show();
 $(".tabs a").click(function (event) {
 event.preventDefault();
 currentTab = $(this).attr('href');
 $(".tab").hide();
 $(currentTab).show();
 //sætter current anchor
 $(".tabs a").removeClass("active"); //fjernet alle active links
 $(this).addClass("active") // $(this) er = det aktive link der er trykket på. Tilføjer active class til denne.
 });

Jquery Tab

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler