메인페이지의 탭 메뉴를 누르면 스크롤이 위로 올라갑니다. 채택완료
안녕하세요?
css 라디오 버튼 탭인데요
탭을 누르면 화면 스크롤이 위로 올라가면서 내용이 바뀝니다.
그래서 번거롭게 다시 스크롤을 내려야 하는데요
고칠 수 있을까요?
답변 주시면 정말 감사하겠습니다.
Copy
<style>/* Set the size and font of the tab widget */.tabGroup { font-family:sans-serif,'nanum gothic'; font-size: 10pt; margin: 0 auto; background: none repeat scroll 0 0 #F3F1EB; border: 1px solid #DEDBD1; padding: 5px; width: auto; height: auto; color: #6F6F6F;font-weight: bold;} /* Configure the radio buttons to hide off screen */.tabGroup > input[type="radio"] { position: absolute; left:-100px; top:-100px;} /* Configure labels to look like tabs */.tabGroup > input[type="radio"] + label { /* inline-block such that the label can be given dimensions */ display: inline-block; float:left; /* A nice curved border around the tab */ border: 1px solid #DEDBD1; /* the bottom border is handled by the tab content div */ border-bottom: 0; /* Padding around tab text */ padding: 5px 10px; /* Set the background color to default gray (non-selected tab) */ background-color:#4C4C4C;color: white;font-weight: bold;} /* Focused tabs need to be highlighted as such */.tabGroup > input[type="radio"]:focus + label { border:1px solid #DEDBD1;color: #4C4C4C;font-weight: bold;} /* Checked tabs must be white with the bottom border removed */.tabGroup > input[type="radio"]:checked + label { background-color:white; font-weight: bold; border-bottom: 1px solid white; margin-bottom: -1px; color: #4C4C4C;} /* The tab content must fill the widgets size and have a nice border */.tabGroup > div { display: none; border: 1px solid #DEDBD1; background-color: white; padding: 20px 10px; height: auto; margin-top: 10px; color: #6F6F6F; border-radius: 0 0px 0px 0px;} /* This matchs tabs displaying to thier associated radio inputs */#rad1:checked ~ .tab1, #rad2:checked ~ .tab2, #rad3:checked ~ .tab3, #rad4:checked ~ .tab4, #rad5:checked ~ .tab5 { display: block;}#rad11:checked ~ .tab11, #rad12:checked ~ .tab12, #rad13:checked ~ .tab13, #rad14:checked ~ .tab14, #rad15:checked ~ .tab15 { display: block;}</style>답변 1개
채택된 답변
+20 포인트
11년 전
Copy
<a href="#">탭</a>처럼 href가 '#' 으로 되어 있으신거 아니신가요?
Copy
<a href="javascript:void(1);">탭</a>CSS 조절이 아닌 href 조절로 안 움직이게 하실 수 있습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
잘되야될텐데
11년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
[code]
<div>
<input type="radio" name="tabGroup1" id="rad1" checked="checked"/>
<label for="rad1">탭1</label>
<input type="radio" name="tabGroup1" id="rad2"/>
<label for="rad2">탭2</label>
<div class="tab1" style="padding_top:10px;">내용1</div>
<div class="tab2">내용2</div>
</div>[/code]
이런식으로 되어 있습니다.