html - Problem med flere <div> i tabs - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript html css

<< < 1 2 > >>

Bruger #14602 @ 22.03.12 18:00

Hej alle.

Jeg har fundet et stykke kode på nettet, hvor jeg ved hjælp af tabs kan vise et <div> af gangen.

Dvs. trykker man på "tab 1" vises teksten tilhørende "tab 1" - trykkes der på "tab 2" vises teksten tilhørende "tab 2" i samme felt som det tab 1 stod i.
Her er selve HTML koden

HTML kode

 <body>
   <div id="tabs">
     <ul>
       <li><a href="#tab-1">Tab 1</a></li>
       <li><a href="#tab-2">Tab 2</a></li>
     </ul>
 
     <div id="tab-1">
     Lorem Ipsum
     </div>
 
     <div id="tab-2">
      Lorem ipsum
     </div>
 </div>
 </body>

Problemet er blot at den ikke kan udskrive noget som helst hvis jeg tilføjer et <div> inden i <div class="tab-1">..

Jeg vil tro at problemet ligger i følgende javascript kode

JScript kode

 $(document).ready(function(){
 $('#tabs div').hide();
 $('#tabs div:first').show();
 $('#tabs ul li:first').addClass('active');
 $('#tabs ul li a').click(function(){ 
 $('#tabs ul li').removeClass('active');
 $(this).parent().addClass('active'); 
 var currentTab = $(this).attr('href'); 
 $('#tabs div').hide();
 $(currentTab).show();
 return false;
 });
 });

men da det som sagt er noget jeg har fundet på nettet og prøver at arbejde med - har jeg ikke den store forstand på javascript.

CSS-koden er for en god ordens skyld også lige lagt ved

CSS kode

 #tabs {
     font-size: auto;
     margin: 20px 0;
 }
 #tabs ul {
     float: left;
     background: #fff;
     width: 500px;
     padding-top: 4px;
 }
 #tabs li {
     margin-left: 8px;
     list-style: none;
 }
 * html #tabs li {
     display: inline;
 }
 #tabs li, #tabs li a {
     float: left;
 }
 #tabs ul li.active {
     border-top:2px #FFFF66 solid;
     background: #FFFFCC;
 }
 #tabs ul li.active a {
     color: #333333;
 }
 #tabs div {
     background: #FFFFCC;
     clear: both;
     width: auto;
     padding: 0;
     min-height: 300px;
 }
 #tabs div h3 {
     margin-bottom: 5px;
 }
 #tabs div p {
     line-height: auto;
 }
 #tabs ul li a {
     text-decoration: none;
     padding: 8px;
     color: #000;
     font-weight: bold;
 }
 .thumbs {
     float:left;
     border:#000 solid 1px;
     margin-bottom:20px;
     margin-right:20px;
 }

Nogle der kan hjælpe mig lidt på vej?

Tak

Indlæg senest redigeret d. 22.03.2012 18:01 af Bruger #14602

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

Sorter efter stemmer Sorter efter dato

Bruger #14602 @ 22.03.12 20:08

Jeg vil gerne bruge <div id="tab-1"> (og <div id="tab-2">

som "container" - hvor i der står en række nyheder.

jeg vil derfor gerne kunne give "title" et <div>, meta et <div> og text et <div> - som stadigvæk er inde i <div id="tab-1"></div>

Dette vil sige at den færdige kode gerne skulle se ud som følger:

HTML kode

 <div id="tab-1">
   <div class="title">Lorem Ipsum</div>
   <div class="meta"> forfatter | dato </div>
   <div class="text"> Lorem Ipsum dollar etc.</div>
 </div>

Gav det mening?

Bruger #14602 @ 22.03.12 20:27

Sådan ville jeg også mene at jeg kunne gøre det - men det gør desværre igen at den ikke viser noget tekst.

Jeg har prøvet at sætte din html kode (med tilhørende CSS) ind under den der hedder tab 1 :
http://iye.dk/test2.php

Men som du ser udskriver den intet..

I tab 2 hvor der ikke er nogle divs inde i <div id="tab-2"> - udskriver den teksten som der står..

Bruger #15663 @ 22.03.12 20:31

415

For at udelukke så prøv lige at tilføje:

JScript kode

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

Bruger #14602 @ 22.03.12 20:51

Det er tilføjet..

Dog stadigvæk med samme problem

Bruger #14602 @ 22.03.12 21:22

Jeg er MEGET taknemmelig for at du vil bruge din tid på at hjælpe mig..

Skal den bare sættes i forlængelse af den gamle javascript - eller erstatte?

Original kode

JScript kode

 $(document).ready(function(){
 $('#tabs div').hide();
 $('#tabs div:first').show();
 $('#tabs ul li:first').addClass('active');
 $('#tabs ul li a').click(function(){ 
 $('#tabs ul li').removeClass('active');
 $(this).parent().addClass('active'); 
 var currentTab = $(this).attr('href'); 
 $('#tabs div').hide();
 $(currentTab).show();
 return false;
 });
 });

Din nye kode:

JScript kode

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

Bruger #15663 @ 22.03.12 21:28

415

Den skal erstatte

Bruger #14602 @ 22.03.12 21:34

Som du kan se på http://www.iye.dk/test2.php - så udskriver den helt som den skal alle div's nu - nu virker selve show / hide effekten bare ikke

Jeg prøver at arbejde videre med den kode du har givet mig - og ser om jeg kan løse det - men hvis du har svaret må du meget gerne poste det

Bruger #14602 @ 22.03.12 21:46

Havde jeg fuldstændig overset!

Det ser ud til at virke nu..

Jeg er som sagt meget taknemmelig for hjælpen!

Mvh Jacob

Bruger #15663 @ 22.03.12 21:47

415

Det var så lidt

<< < 1 2 > >>

Problem med flere <div> i tabs

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler