Brauchen Sie Hilfe, um ein TabSystem für dieses HTML

Question

Ich arbeite an einem Schulprojekt. http://euctester.dk/htx153d/casperh/ep/

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> 

Answer 1

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(); 
}); 

Answer 2

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.

Answer 3

<!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