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 #15663 @ 22.03.12 19:50

415

Prøv at ændre det sådan her:

HTML kode

 <div id="tab-1" class="tab">
         Lorem Ipsum
     </div>
     <!-- End Events-->
 
     
     <!-- Starts News-->
     <div id="tab-2" class="tab">
      Lorem ipsum
     </div>

Så kan du via CSS gøre sådan her:

CSS kode

 .tab
 {
 padding: 10px;
 }

Den id der er sat på dine tabs bruger du kun til at henvise til når den enkelte tab skal vises.
Vi styler det altså på class'en 'tab'

Bruger #15663 @ 22.03.12 20:18

415

Ja det gav mere mening.

Jamen så lad os gå tilbage til hvor vi starter.

tab-1 og tab-2 bruges kun til at "linke" til når vi trykker på vores link.

Så hver gang du har en tab-boks så sætter du en class på som kan hedde tab.

Dernæst laver du inde i hver tab de tre forskellige (title, meta og text).

Så du kunne komme til at se sådan her ud

HTML kode

 <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" class="tab">
   <div class="title">Titel</div>
   <div class="meta">Meta ord</div>
   <div class="text">Text</div
 </div>
 
 <div id="tab-2" class="tab">
   <div class="title">Titel 2</div>
   <div class="meta">Meta ord 2</div>
   <div class="text">Text 2</div
 </div>
 
 </div>

Så gør du sådan her i din CSS

CSS kode

 #tabs .tab
 {
 padding: 10px;
 }
 
 #tabs .tab .title
 {
 font-size: 16px;
 }
 
 #tabs .tab .meta
 {
 font-size: 12px;
 }
 
 #tabs .tab .text
 {
 font-size: 10px;
 }

Bruger #15663 @ 22.03.12 21:11

415

Det var også min fejl.

Her er den du skal 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");
     });

Den burde kunne klare det.

Bruger #15663 @ 22.03.12 21:41

415

Du mangler også at afslutte noget i din js.

JScript kode

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

Bruger #6559 @ 22.03.12 18:35

843

For mig ligner det lidt jQuery UI tabs, du har fat i. Hvis du kan prøve at smide et link til din side så vi kan se hvordan det ser ud vil det være supert.

Bruger #14602 @ 22.03.12 19:08

Jeg har ændret lidt i CSS koden så det nu ser lidt bedre ud..

Men jeg har koden uploadet som eksempel her:

http://iye.dk/test2.php

Det jeg faktisk gerne vil have er at det tekst der kommer til at stå i hver af "boksene" kan få forskellige div-værdier, således at det kan se lidt pænere ud.

Bruger #15663 @ 22.03.12 19:26

415

Hej Jacob.

Hvilke bokse er det du gerne vil have til at se anderledes ud?

Bruger #14602 @ 22.03.12 19:44

Jeg vil gerne have teksten "lorem ipsum" ind i et div - således at jeg f.eks. kan styre padding m.v. på teksten.

jeg har prøvet med at oprette ekstra <div>'s og give dem værdier - men når jeg prøver at gøre det - så forsvinder teksten helt fra boksen..

Jeg har arbejdet med CSS i et stykke tid - og det er derfor ikke der fejlen ligger (er jeg ret sikker på)

EDIT:
Jeg har tilføjet følgende til min CSS

CSS kode

 #tabs .post {
     padding-left: 15px;
     padding-top: 15px;
 }

og følgende til tab-1 div'et

HTML kode

 <div id="tab-1">
         <div class="post">
         Lorem Ipsum
         </div>
     </div>

Og som I kan se på http://iye.dk/test2.php - udskrives der ingen tekst i tab-1

Indlæg senest redigeret d. 22.03.2012 19:49 af Bruger #14602

Bruger #14602 @ 22.03.12 19:54

Det virker sgu med padding på den måde - så tak for det!

Men der ændrer jeg jo blot i <div> ID'en.

Det jeg gerne vil være i stand til at f.eks. at lave følgende inde i <div id="tab-2"> er f.eks.

<div class="title">
<div class="meta">
<div class="text">

Indlæg senest redigeret d. 22.03.2012 19:58 af Bruger #14602

Bruger #15663 @ 22.03.12 20:03

415

Fortæl mig hvad du ønsker at opnå med dem.

Så er det mange gange langt lettere.

<< < 1 2 > >>

Problem med flere <div> i tabs

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler