이 탭이있는 콘텐츠의 문제점은 무엇입니까?

Question

contact.html 파일에 Google지도와 문의 양식이 있습니다. 그들은 기본적으로 블록으로 표시되었습니다. 나는 그것을 탭 모양으로 바꾸고 싶었다. 의 내가 HTML이 같은 코드가 있다고 가정 해 봅시다 :

<div id="tab-group" class="tab-group">    
<h3 class="tab-header activate" id="tab-header-1">We are here</h3> 
     <div class="tab-content activate" id="tab-content-1"></div> 
    <h3 class="tab-header" id="tab-header-2">Contact us</h3> 
     <div class="tab-content" id="tab-content-2"> 

하여 해당 사업부의 콘텐츠를 식, 내가 머리에 필요한 스크립트와 구글지도를 "탭 내용-1". 그리고 id = "tab-content-2"인 div에는 다음과 같은 문의 양식이 있습니다. 여기

<form class="tab-content-2" method="post" action="contact-post.html"> 
    <div> 
     <span><label>NAME</label></span> 
     <span><input name="userName" type="text" class="textbox"></span> 
    </div> 
    <div> 
     <span><label>E-MAIL</label></span> 
     <span><input name="userEmail" type="text" class="textbox"></span> 
    </div> 
    <div> 
     <span><label>PHONE</label></span> 
     <span><input name="userPhone" type="text" class="textbox"></span> 
    </div> 
    <div> 
     <span><label>YOUR MESSAGE</label></span> 
     <span><textarea name="userMsg"> </textarea></span> 
    </div> 
    <div> 
     <span><input type="submit" value="Send me"></span> 
    </div> 
</form> 

는 자바 스크립트입니다 :

#tab-group h3 { 
text-align: left; 
text-shadow: 0 1px 0 #161616; 
font-family: 'Julius Sans One', sans-serif; 
font-size: 1.8em; 
color: #FFD955; 
padding-bottom: 20px; 
} 
.activate { 
position: relative; 
margin-bottom: 2em; 
} 

#tab-group.activate .tab-header { 
font-weight: normal; 
font-size: 13px; 
text-transform: uppercase; 
padding: 4px 6px; 
display:inline; 
} 

    .activate .tab-header { 
position: absolute; 
top: 0; 
margin: 0; 
padding: 0.25em 0.5em; 
left: 0; 
background: rgba(168, 161, 152, 0.34); 
border: 1px solid #161616; 
border-radius: 4px 4px 0 0; 
z-index: 2; 
cursor: pointer; 
    } 

    .activate .tab-header.activate { 
background: #000; 
    } 

    .activate .tab-content { 
position: relative; 
top: 0; 
margin: 0; 
padding: 0.5em; 
top: 24px; 
border: 1px solid #999; 
z-index: 1; 
background: white; 
zoom: 1; 
    } 

    .activate .tab-content:after { 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
    } 

    .activate #tab-header-2 { 
left: 9em; 
    } 
    .activate .tab-content { 

    } 

    .activate .tab-content:active { 
display: block; 
    } 

    #tab-content-1 { 
width: 56.4em; 
    height:30em; 
    } 
    #tab-header-1 { 
text-shadow: 0 1px 0 #161616; 
font-family: 'Julius Sans One', sans-serif; 
font-size: 1.8em; 
color: #FFD955; 
padding-bottom: 20px; 
    } 
    #tab-header-2 { 
text-shadow: 0 1px 0 #161616; 
font-family: 'Julius Sans One', sans-serif; 
font-size: 1.8em; 
color: #FFD955; 
padding-bottom: 20px; 
    } 
    #tab-content-2{ 
position:relative; 
padding-bottom:30px; 
background-color:#000; 

    } 

: 나는 모든을 정리 알고

"use strict"; 

document.addEventListener('DOMContentLoaded', function() { 
document.getElementById('tab-group').className = 'activate'; 

var headerClass = 'tab-header', 
    contentClass = 'tab-content'; 

document.getElementById('tab-group').addEventListener('click', function(event) { 

    var myHeader = event.target; 

    if (myHeader.className !== headerClass) return; 

    var myID = myHeader.id, // e.g. tab-header-1 
     contentID = myID.replace('header', 'content'); // result: tab-content-1 

    deactivateAllTabs(); 

    myHeader.className = headerClass + ' activate'; 
    document.getElementById(contentID).className = contentClass + ' activate'; 
}); 

function deactivateAllTabs() { 
    var tabHeaders = document.getElementsByClassName(headerClass), 
     tabContents = document.getElementsByClassName(contentClass); 

    for (var i = 0; i < tabHeaders.length; i++) { 
     tabHeaders[i].className = headerClass; 
     tabContents[i].className = contentClass; 
    } 
} 
}); 

하지만 난 그런 기본적인 일에 잃고 화를 얻고, 여기에 CSS입니다

간단한 탭 콘텐츠처럼 작동하고 싶습니다. 그러나 탭의 내용은 블록으로 표시되며 h3 탭 머리글을 클릭하면 내용이 변경되지 않습니다. 이렇게 보입니다 ..... 내가 뭘 잘못하고 있니? 미리 감사드립니다 ...

Answer 1

그것은 단지 간단한 수정이어야합니다. 다음을 추가하십시오 :

.activate .tab-content { display: none; } 
.activate .tab-content.activate { display: block; } 

그런 식으로 활성 탭만 보이고 나머지는 숨겨집니다.

체크 아웃 : http://jsfiddle.net/t8G57/2/