CSS는 jQuery를 도와주었습니다
문제
좋아, 기본적으로 다음과 같은 설정이 있습니다.
<div id="tabs">
<div id="tab_one">
Something here
</div>
<div id="tab_two">
Something else here
</div>
<div id="tab_three">
Another thing here
</div>
</div>
이제 내 CSS는 다음과 같습니다.
#tab_one {
position:relative;
left:0px;
top:0px;
}
#tab_two {
position:relative;
left:5000px;
}
#tab_three {
position:relative;
left:5000px;
}
기본적으로 내가 여기서하는 일은 Tab_one 만 보여줍니다. 그런 다음 사용자가 tab_two를 클릭하면 tab_two가 왼쪽으로 변경됩니다 : 0px; 탭으로 변경 : 왼쪽으로 변경 : 5000px; (그래서 그것은 단지 속성을 전환합니다). 문제는 상대적으로 탭의 높이 아래로 가기 때문입니다. 따라서 tab_one의 높이가 50px 인 경우 tab_two의 상단은 50px입니다. 0px가 필요합니다. 그것을 절대로 설정 한 다음 상대적으로 다시 설정하면 작동하지만 작동하지 않는 탭을 다시로드하기 때문에 작업중인 프로젝트에는 불가능합니다. 50 대신 겹치거나 0을 만드는 방법을 알아내는 데 도움이되는 것은 크게 감사 할 것입니다.
해결책
당신은 당신이 당신의 위치 절대와 위치 상대적 혼합을 가질 수있는 것 같습니다 ...이 훌륭한 자습서를 확인하십시오. CSS 포지셔닝.
즉, 나는 당신이 볼 수 있도록이 예를 함께 던졌습니다.여기서 일합니다).
CSS
.tabs {
position: relative;
left: 0;
top: 0;
}
.info {
position: absolute;
left: -5000px;
top: 25px;
}
.active {
position: absolute;
top: 25px;
left: 0;
}
HTML
<div class="tabs">
<a href="#tab_one">Tab 1</a>
<a href="#tab_two">Tab 2</a>
<a href="#tab_three">Tab 3</a>
<div>
<div id="tab_one" class="info">
Something here
</div>
<div id="tab_two" class="info">
Something else here
</div>
<div id="tab_three" class="info">
Another thing here
</div>
</div>
스크립트
$(document).ready(function(){
// select first tab, get ID
var tmp = $('.tabs a:eq(0)').attr('href');
$(tmp).removeClass('info').addClass('active');
// tab display
$('.tabs a').click(function(){
$('.tabs div > div').removeClass('active').addClass('info');
$( $(this).attr('href') ).addClass('active');
return false;
})
})
편집 : opps ".tabs A"CSS는 각 탭으로 DIV로 시작했을 때부터 남겨졌습니다 ... 아무것도하지 않으므로 LOL을 무시할 수 있습니다.
다른 팁
오프셋을 사용하는 대신 display
재산. "탭"클래스를 탭 컨테이너에 추가하십시오.
<div id="tabs">
<div id="tab_one" class="tab">
Something here
</div>
<div id="tab_two" class="tab">
Something else here
</div>
<div id="tab_three" class="tab">
Another thing here
</div>
</div>
그리고 스타일 시트는 다음과 같습니다.
.tab { display: none } /* Don't render by default */
.show_tab_one #tab_one,
.show_tab_two #tab_two,
.show_tab_three #tab_three { display: block } /* Selectively render */
당신이해야 할 일은 클래스를 설정하는 것입니다. #tabs
"show_tab_one", "show_tab_two"또는 "show_tab_three"의 요소. 물론 동적 ID가있는 동적 수의 탭이있는 경우이 솔루션이 효과가 없습니다.