Tab1 Daten sind immer noch sichtbar, wenn Tab2 geklickt wird

Ich möchte eine Webseite mit reinen HTML, CSS und Javascript erstellen. Ich habe eine Webseite erstellt, die mehrere Tabs enthält. Jede Registerkarte zeigt Daten laden von verschiedenen HTML-Dateien. finden Sie den Code unten:Tab1 Daten sind immer noch sichtbar, wenn Tab2 geklickt wird

<div class="tabs"> 
    <div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab1</label> 
     <!-- <div class="content"> 
      <iframe src="tab1.html"> 
      </iframe> 
     </div> --> 
      <div class="content" style="width:700px;height:700px;"> 
      <!-- <embed type="text/html" src="summary.html"> --> 
      <iframe src="tab1.html"></iframe> 
     </div> 
    </div> 
    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab2</label> 
     <div class="content"> 
      <iframe src="tab2.html"></iframe> 
     </div> 
    </div> 
    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab3</label> 
     <div class="content"> 
      <iframe src="tab3.html"></iframe> 
     </div> 
    </div> 
</div>

Ich habe versucht, die folgenden Elemente zu beheben:

Wenn Benutzer klicken Sie auf tab1, wird der Inhalt wieder angezeigt, wenn der Benutzer auf Tab2 klickt, immer noch der Tab1 Inhalt kann wie unten in der Geige gezeigt zu sehen.

Fiddle

Quelle

2016-12-15 joann

das Problem ist, dass Tab1 nicht nur verschwindet, wenn Sie darauf klicken, wird es von den anderen Registerkarten überlagert. Sie könnten versuchen, den Inhalt auszublenden, wenn Sie auf die anderen Registerkarten klicken. – sebasaenz

@sebasaenz - können Sie bitte vorschlagen, wie Sie Javascript verwenden, wie ich versuchte, die Lösung zu finden, aber nicht die passende mit Javascript finden konnte. Ich kann keine anderen Frameworks verwenden, also muss dies mit Javascript erreicht werden. – joann

Sie brauchen nur noch mehr mi noch Dinge:

 [type=radio]:checked ~ label ~ .content { 
      z-index: 1; 
      display: block; 
     } 

     [type=radio] ~ .content 
     { 
      display: none; 
     }

Quelle

2016-12-15 04:14:05

Sie nicht auf die Registerkarte stattdessen versteckt Sie jede Registerkarte Überlagerung .. die html Sie haben getan richtig. .only Ihre CSS brauchen ein wenig Codezeile

display: none;content Klasse

auf Sie hinzufügen, und fügen Sie dann diesen Block

[type=radio]:checked ~ .content { 
     display: block !important; 
    }

dies die div.content in Ihrem radio:checked

Plunker zeigen: here

Quelle

2016-12-15 04:11:45 noobHere

Tab1 Daten sind immer noch sichtbar, wenn Tab2 geklickt wird

Antwort

Verwandte Themen