탭메뉴를 만드는 되요, 활성화 안됩니다.
본문
자바스크립없이 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;
}
답변 2
하단에 추가하시면 탭색상 및 레이어가 활성 됩니다.
.tab-wrap article:nth-of-type(1) p {
display: block;
}
.tab-wrap article:nth-of-type(1) h1 { //탭색상 활성화
background-color: yellow;
}
요 아래 제가 올린 탭 메뉴 사용해 보세요...ㅎㅎ
쓰기 괜찮아요...
http://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=6880&page=4
답변을 작성하시기 전에 로그인 해주세요.
