탭메뉴를 만드는 되요, 활성화 안됩니다. 채택완료
자바스크립없이 CSS 만으로 탭메뉴 인데요
저도 구해서 작업을 했는데요
다른거 탭은 잘 되는데요
처음들어 올때 1번탭이 활성화 되게 할려면 어떻에 해야 되나요?
조언 부탁드립니다.
감사합니다.
html 소스 입니다.
</strong></p><p><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;"></strong><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b><div class="tab-wrap"></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <ul></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <li><a href="#tab1">tab1</a></li></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <li><a href="#tab2">tab2</a></li></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> </ul></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>
</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <div></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <article id="tab1"></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <h1>tab1</h1></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <p>Here is tab1 contents</p></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> </article></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <article id="tab2"></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <h1>tab2</h1></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> <p>Here is tab2 contents</p></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> </article></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> </div></b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b></div></b></span></font><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;">
</strong></p><p><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;">
css 소스입니다.
</strong></p><p><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;"></strong><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap * {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> margin: 0px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> padding: 0px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> position: relative;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> padding-top: 30px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap li {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> z-index: 2;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> position: absolute;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> top: 0px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> width: 100px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> height: 30px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> text-indent: -9999%;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap li:nth-of-type(1) {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> left: 0px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap li:nth-of-type(2) {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> left: 100px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap li a {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> display: block;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> width: 100%;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> height: 100%;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article h1 {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> position: absolute;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> top: 0px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> width: 100px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> height: 30px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> line-height: 30px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> box-sizing: border-box;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> border: 1px solid #ddd;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> text-align: center;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> font-size: 12px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article p {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> border: 1px solid #ddd;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> padding: 30px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article:target h1 {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> background-color: yellow;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article:nth-of-type(1) h1 {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> left: 0px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article:nth-of-type(2) h1 {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> left: 100px;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article p {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> display: none;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>.tab-wrap article:target p {</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b> display: block;</b></span></font></p><p><font color="#7f7f7f" face="돋움, Dotum, sans-serif"><span style="font-size: 12px; line-height: normal;"><b>}</b></span></font><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;">
</strong></p><p><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;">
답변 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">http://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=6880&page=4
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인