CSS는 간단한 탭 전환 효과를 구현합니다(코드 포함).

이 글의 내용은 CSS로 간단한 탭 전환 효과를 구현하는 내용입니다. 참고할만한 가치가 있으니 참고하시면 좋을 것 같습니다.

앵커포인트 아이디어를 활용하면 간단한 탭 전환 효과를 얻을 수 있습니다.

페이지 레이아웃 및 스타일:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
</div> 

......

.box {
   height: 10em;
   border: 1px solid #ddd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ddd;
}

컨테이너는 Overflow:hidden으로 설정되어 있으며 각 목록의 높이는 컨테이너의 높이와 동일하므로 항상 하나의 목록이 표시됩니다. 세 번째 버튼과 같은 버튼을 클릭하면 URL 주소의 앵커 체인이 #3으로 변경되어 ID가 3인 세 번째 목록의 앵커 위치 지정이 트리거됩니다. 즉, 컨테이너의 스크롤 높이가 변경됩니다. 목록 3의 위쪽 가장자리를 만들려면 스크롤 컨테이너의 위쪽 가장자리에 맞춰 탭 효과를 얻으세요.

그러나 이 방법에는 몇 가지 단점이 있습니다.

#🎜🎜 ##🎜🎜 #먼저, 컨테이너의 높이를 고정해야 합니다.
두 번째, 앵커 위치 지정으로 인해 양식 재배치가 트리거됩니다. 즉, 페이지를 스크롤할 수 있는 경우 , 그러면 클릭 옵션 페이지도 점프합니다
이 상황을 변경하려면 다음 방법을 사용하십시오. 페이지 레이아웃은 다음과 같습니다.

<div>
    <div>
<input>1</div>
    <div>
<input>2</div>
    <div>
<input>3</div>
    <div>
<input>4</div>
</div>
<div>
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
</div>

이렇게 하면 페이지 양식에 스크롤 막대가 있어도 대부분의 경우 점프 현상이 발생하지 않습니다. 원칙은 보이지 않는

연결을 각 목록에 삽입하는 것입니다. 이러한 방식으로 옵션 버튼을 클릭하면 입력 상자의 포커스 동작이 트리거되고 앵커 위치 지정이 트리거되며 탭 전환 효과가 달성됩니다.

<input>输入框，然后选项卡按钮变成<label></label>元素，并通过 for 属性与<input>输入框的 id그러나 위의 기술이 실제 프로젝트에 사용된다면 자바스크립트의 지원과 분리될 수 없습니다. 하나는 탭 버튼의 선택 효과이고, 다른 하나는 부분 처리입니다. 브라우저 외부에 있을 때 목록의 영역이 점프하는 문제입니다.

관련 처리는 jQuery 구문을 사용하여 다음과 유사합니다.

$('label.click').removeAttr('for').on('click', function() { $('.box').scrollTop(xxx); 'xxx'表示滚动数值
});

위 내용은 CSS는 간단한 탭 전환 효과를 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!