그누보드 QA - 탭메뉴를 만드는 되요, 활성화 안됩니다.

탭메뉴를 만드는 되요, 활성화 안됩니다.

지로쿨 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015.05.19 17:17:53 조회 3996 (211.♡.♡.97)

본문

자바스크립없이 CSS 만으로 탭메뉴 인데요

저도 구해서 작업을 했는데요

다른거 탭은 잘 되는데요

처음들어 올때 1번탭이 활성화 되게 할려면 어떻에 해야 되나요?

조언 부탁드립니다.

감사합니다.

html 소스 입니다.


<div class="tab-wrap">
    <ul>
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
    </ul>


    <div>
        <article id="tab1">
            <h1>tab1</h1>
            <p>Here is tab1 contents</p>
        </article>
        <article id="tab2">
            <h1>tab2</h1>
            <p>Here is tab2 contents</p>
        </article>
    </div>
</div>

css 소스입니다.


.tab-wrap * {
    margin: 0px;
    padding: 0px;
}
.tab-wrap {
    position: relative;
    padding-top: 30px;
}
.tab-wrap li {
    z-index: 2;
    position: absolute;
    top: 0px;
    width: 100px;
    height: 30px;
    text-indent: -9999%;
}
.tab-wrap li:nth-of-type(1) {
    left: 0px;
}
.tab-wrap li:nth-of-type(2) {
    left: 100px;
}
.tab-wrap li a {
    display: block;
    width: 100%;
    height: 100%;
}
.tab-wrap article h1 {
    position: absolute;
    top: 0px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
}
.tab-wrap article p {
    border: 1px solid #ddd;
    padding: 30px;
}
.tab-wrap article:target h1 {
    background-color: yellow;
}
.tab-wrap article:nth-of-type(1) h1 {
    left: 0px;
}
.tab-wrap article:nth-of-type(2) h1 {
    left: 100px;
}
.tab-wrap article p {
    display: none;
}
.tab-wrap article:target p {
    display: block;
}