2016-04-03 7 views
0

Ich arbeite an einem Schulprojekt. http://euctester.dk/htx153d/casperh/ep/Brauchen Sie Hilfe, um ein TabSystem für dieses HTML

Ich mag würde eine tabsystem auf dieser Seite machen: http://euctester.dk/htx153d/casperh/ep/kravogregleruv%C3%A6rdi.html

Ich habe versucht, som Führer, aber ohne Erfolg.

Dies ist mein HTML für die Registerkarten. Ich kann nicht herausfinden, wie man JavaScript erstellt, das die Klasse der verschiedenen Divs ändern kann.

<div id="selector"> 
    <div id="tabs1"> 
     <a href="#tabs_content1"><div id="tabs1-1" class="active"> 
      <p>Generelt</p> 
     </div></a> 

     <a href="#tabs_content2"><div id="tabs1-2" class=""> 
      <p>Nybyggeri</p> 
     </div></a> 

     <a href="#tabs_content3"><div id="tabs1-3" class=""> 
      <p>Ændret anvendelse</p> 
     </div></a> 

     <a href="#tabs_content4"><div id="tabs1-4" class=""> 
      <p>Energirenovering</p> 
     </div></a> 

     <a href="#tabs_content5"><div id="tabs1-5" class=""> 
      <p>Tilbygning</p> 
     </div></a> 
    </div> 

    <div id="content"> 
     <div id="tabs_content1" class="tab active"> 
       <h1>Generelt</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
     </div> 

     <div id="tabs_content2" class="tab"> 
       <h1>Nybyggeri</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
     </div> 

     <div id="tabs_content3" class="tab"> 
       <h1>Ændret anvendelse</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
     </div> 

     <div id="tabs_content4" class="tab"> 
       <h1>Energirenovering</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
     </div> 

     <div id="tabs_content5" class="tab"> 
       <h1>Tilbygning</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
     </div> 
    </div> 
</div> 
+0

HTML5 Datenattribute verwendet, wird Ihnen helfen. Binden Sie den Inhalt an das jeweilige btn und zeigen Sie es an, wenn Sie darauf klicken. –

+0

Danke für den Beitrag, ich werde es untersuchen. –

Antwort

0

im HTML-Code können Sie versuchen, eine Klasse wie myTab zu Registerkarten hinzufügen und für div content, zum Beispiel:

<div id="selector"> 
    <div id="tabs1"> 
     <div id="tabs1-1" class="myTab active"> 
      <p>Generelt</p> 
     </div> 
     <div id="tabs1-2" class="myTab"> 
      <p>Nybyggeri</p> 
     </div>  
    </div> 

    <div id="tabs1-1_content" class="content" style="display: block;"> 
     <div id="tabs1-1_content1"> 
      <h1>Generelt</h1> 
      <p>Your content 1</p> 
     </div> 
    </div> 

    <div id="tabs1-2_content" style="display: none;" class="content"> 
     <div id="tabs1-2_content2"> 
      <h1>Nybyggeri</h1> 
      <p>Your content 2</p> 
     </div> 
    </div> 
</div> 

schließlich mit jQuery-Funktion wie folgt aus:

$('.myTab').on('click', function(){ 
    $('.myTab').removeClass('active'); 
    $('.content').hide(); 
    var content = '#'+$(this).attr('id')+'_content'; 
    $(this).addClass('active'); 
    $(content).show(); 
}); 
0

Ich würde empfehlen, Bootstrap zu verwenden. Es ist sehr einfach zu bedienen. (Siehe: Bootstrap Tabs)
Der folgende Code wird Ihnen helfen, Registerkarten mit Bootstrap anzuzeigen. Hier Link zu JSFiddle

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#tab1">Generelt</a></li> 
    <li><a data-toggle="tab" href="#tab2">Nybyggeri</a></li> 
    <li><a data-toggle="tab" href="#tab3">Ændret anvendelse</a></li> 
    <li><a data-toggle="tab" href="#tab4">Energirenovering</a></li> 
    <li><a data-toggle="tab" href="#tab5">Tilbygning</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active"> 
     <h1>Generelt</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
    </div> 
    <div id="tab2" class="tab-pane fade"> 
     <h1>Nybyggeri</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
    </div> 
    <div id="tab3" class="tab-pane fade"> 
     <h1>Ændret anvendelse</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
    </div> 
    <div id="tab4" class="tab-pane fade"> 
     <h1>Energirenovering</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
    </div> 
    <div id="tab5" class="tab-pane fade"> 
     <h1>Tilbygning</h1> 
       <p> text text........... text.....</p> 
       <p> text text........... text.....</p> 
    </div> 
    </div> 
</div> 

Mit wenig Code ändert Sie vertikale Tabs erzeugen kann.

+0

Danke für den Vorschlag, aber ich fürchte, ich kann Bootstrap dafür nicht verwenden. Ich muss in der Lage sein, jedes bisschen Kodierung bei der Prüfung zu erklären, und mein Lehrer sagte mir, dass Bootstrap nicht in Frage kommt. Ich werde jedoch Bootstrap verwenden, wenn ich jemals wieder eine Website erstellen werde. –

0

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Tabs using css</title> 
 
    <style> 
 
    .tabs { 
 
    position: relative; 
 
    min-height: 220px; /* This part sucks */ 
 
    clear: both; 
 
    margin: 25px 0; 
 
} 
 
    .tab { 
 
    float: left; 
 
} 
 
    .tab label { 
 
    background: #eee; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
    margin-left: -1px; 
 
    position: relative; 
 
    left: 1px; 
 
    background-color: aqua; 
 
} 
 
    .tab [type=radio] { 
 
    display: none; 
 
} 
 
    .content { 
 
    position: absolute; 
 
    top: 28px; 
 
    left: 0; 
 
    background: white; 
 
    right: 0; 
 
    bottom: 0; 
 
    padding: 20px; 
 
    border: 1px solid #ccc; 
 
    background: yellow; 
 
} 
 
    [type=radio]:checked ~ label { 
 
    background: silver; 
 
    border-bottom: 1px solid white; 
 
    z-index: 2; 
 
} 
 
    [type=radio]:checked ~ label ~ .content { 
 
    z-index: 1; 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="tabs"> 
 
    
 
    <div class="tab"> 
 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
 
    <label for="tab-1">Tab One</label> 
 
     
 
     <div class="content"> 
 
      Alan McNicoll (1908–1987) was a senior officer in the Royal Australian Navy (RAN) and a diplomat. He graduated from the Royal Australian Naval College in 1926. Attached to the Royal Navy in the Second World War. 
 
     </div> 
 
    </div> 
 
    
 
    <div class="tab"> 
 
     <input type="radio" id="tab-2" name="tab-group-1"> 
 
     <label for="tab-2">Tab Two</label> 
 
     
 
     <div class="content"> 
 
      The Normandy landings (codenamed Operation Neptune) were the landing operations on Tuesday, 6 June 1944 (termed D-Day) of the Allied invasion of Normandy in Operation Overlord during World War II. 
 
     </div> 
 
    </div> 
 
    
 
    <div class="tab"> 
 
     <input type="radio" id="tab-3" name="tab-group-1"> 
 
     <label for="tab-3">Tab Three</label> 
 
     
 
     <div class="content"> 
 
      Operation Bodyguard was the code name for a World War II deception plan employed by the Allied states before the 1944 invasion of north-west Europe. 
 
     </div> 
 
    </div> 
 
    
 
</div> 
 
</body> 
 
</html>

Dies ist eine Art und Weise u Tabs machen können, und wechseln zwischen ihnen, nur von CSS

+0

Danke. Ich habe gerade angefangen zu programmieren, also sind meine Fähigkeiten im Grunde genommen auf HTML und CSS beschränkt, also werde ich das vor den .js oder .jquery Lösungen versuchen, da ich in der Lage sein muss, meine Kodierung beim Examen zu berücksichtigen ... –

+0

Willkommen, Sie können dies als beste Antwort oder Stimme abgeben, wenn Sie glauben, dass dies erfüllt ist. Glückliche Kodierung! – Manish62

Verwandte Themen