메인페이지의 탭 메뉴를 누르면 스크롤이 위로 올라갑니다.
본문
안녕하세요?
css 라디오 버튼 탭인데요
탭을 누르면 화면 스크롤이 위로 올라가면서 내용이 바뀝니다.
그래서 번거롭게 다시 스크롤을 내려야 하는데요
고칠 수 있을까요?
답변 주시면 정말 감사하겠습니다.
<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
<a href="#">탭</a>
처럼 href가 '#' 으로 되어 있으신거 아니신가요?
<a href="javascript:void(1);">탭</a>
CSS 조절이 아닌 href 조절로 안 움직이게 하실 수 있습니다.
답변 정말 감사드립니다. 제꺼는 라디오 버튼식 탭이어서요
<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>이런식으로 되어 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
