CSS는 jQuery를 도와주었습니다

Question

좋아, 기본적으로 다음과 같은 설정이 있습니다.

<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을 만드는 방법을 알아내는 데 도움이되는 것은 크게 감사 할 것입니다.

Answer 1

당신은 당신이 당신의 위치 절대와 위치 상대적 혼합을 가질 수있는 것 같습니다 ...이 훌륭한 자습서를 확인하십시오. 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을 무시할 수 있습니다.

Answer 2

오프셋을 사용하는 대신 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가있는 동적 수의 탭이있는 경우이 솔루션이 효과가 없습니다.