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

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

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

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

2015.05.19 17:17:53 조회 4157 (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;
}