Change language
Python.Engineering Wiki 자바스크립트 탭

자바스크립트 탭

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo

CSS 탭은 탐색하기 쉬운 위치에 관련 정보를 표시하는 데 정말 좋습니다. 기본적으로 레시피 상자나 바인더에서 볼 수 있는 탭 구분선처럼 보입니다. 탐색 탭을 사용하는 웹사이트의 예:

이 두 사이트를 보면서 사이트에서 이러한 사용자 인터페이스 구성요소를 사용할 때의 이점에 대해 생각해 보십시오. 어떤 문제를 해결해야 합니까? 탐색 탭은 어떤 유형의 정보가 좋은 개발 작업입니까?

텍스트 또는 정보를 의미 있는 구성 요소로 구성하고 화면에 표시하지 않는 사용자 인터페이스의 트리에 도달해야 할 때 공간을 너무 많이 차지하면 탐색 탭이 현명한 선택입니다. JavaScript, jQuery 및/또는 Bootstrap을 사용하기 시작하면서 탐색 탭에 대해 더 자세히 이야기할 것이지만 순수한 HTML과 CSS만 필요로 하는 정식 작업도 있습니다. 구성을 살펴보겠습니다.

HTML 코드 구성:

프로젝트의 기본 컨테이너 역할을 할 본문 내부의 컨테이너로 표준 HTML을 구성합니다. . class 속성에서 원하는 대로 이름을 지정할 수 있지만 저는 class = "tabs"로 이름을 지정하겠습니다. 지금까지 HTML 코드는 다음과 같아야 합니다.


" tabs" 를 삽입하고 각각을 tab 클래스로 호출합니다. 이것은 우리가 오늘 쓸 4장의 카드 각각을 나타냅니다. 여기에는 항목, 탭 레이블 및 탭 콘텐츠가 포함됩니다. 이 모든 것을 위한 빈 컨테이너를 만들어 봅시다:

< /html>

콘텐츠 클래스 이름 내부에는 콘텐츠가 있습니다. 원하는 콘텐츠를 사용할 수 있지만 탭에서 연결된 콘텐츠를 사용하는 것이 일반적입니다.

CSS를 시작할 시간:

CSS 작성에 관해서는 가장 큰 컨테이너부터 시작하여 여기에서 가장 작은 컨테이너까지 작업하는 것이 우리가 완료해야 하는 최소한의 작업입니다. 작업:

  1. 보정 상자에 일반 선택기를 설정합니다. border-box
  2. 기본 컨테이너에서 display 속성을 flex로 설정하고 position을 relative로 설정해야 합니다. 디스플레이: flex를 사용하면 카드를 한 줄로 나란히 놓을 수 있으므로 상대적 위치는 지도의 내용을 담는 경계 또는 울타리 역할을 합니다.

이 시점에서 당신은 버튼 라디오와 일부 콘텐츠가 있는 4개의 텍스트 블록처럼 보이는 것을 볼 수 있으므로 선택한 블록을 표시하고 다른 블록을 숨길 방법을 찾아야 합니다.


  1. .tab 컨테이너에서 레이블 스타일을 수정합니다.
    1. 원하는 색상의 1px 실선 테두리
    2. 패딩: 5px, 10px - 레이블 텍스트 주위에 공간 추가
    3. 10px border-radius , 10px, 0px, 0px - 이렇게 하면 레이블이 더 전통적인 카드처럼 보입니다.

지금 작업을 확인하면 레이블에 원형 라디오 버튼이 있는 것을 볼 수 있습니다. 그들의 왼쪽에. 따라서 전통적인 탭처럼 보이지만 버튼의 선택된 속성을 계속 유지하려면 라디오 버튼의 원형 부분을 숨겨야 합니다.

  1. 실제로 버튼을 선택하려면 .tab [유형 = `라디오`]를 사용합니다. 그것을 숨기기 위해 우리는 비교할 수 없는 디스플레이를 넣었습니다.

따라서 한 번에 하나의 탭만 표시하도록 실제 콘텐츠에 접근해야 합니다.

  1. div 내용을 선택한 다음 절대 위치를 로 설정합니다. 절대 위치가 설정되면 상대 부모에서 div를 설정할 수 있습니다. 상, 우, 좌, 하를 이용하여 상위 div 내 원하는 위치에 내용을 설정할 수 있습니다. 이 경우 왼쪽 및 오른쪽 속성을 0으로 설정합니다. 또한 테두리를 만들고 배경색을 불투명한 색상으로 설정하려고 합니다.
  1. z- 조정 선택한 탭의 인덱스는 해당 탭의 패널을 앞으로 가져옵니다. 이렇게 하려면 선택한 버튼과 해당 콘텐츠를 선택합니다. 이렇게 하려면 [type = `radio`]: checked ~ label ~ .content를 사용하세요. CSS에서 요소 사이의 "~"는 선택된 라디오 버튼 다음에 발생하는 레이블 요소 다음에 발생하는 콘텐츠 클래스를 원한다는 것을 알려줍니다.
    1. 활성 탭을 표시하려면, set [type = `radio`]: ~ 레이블을 다른 배경색으로 선택했습니다.

      2. 이제 사용자가 각 탭을 클릭하면 다른 패널의 내용을 보지 않고 탭 간에 전환할 수 있어야 합니다. 이것은 직장에서 탐색 탭에 필요한 최소한의 것입니다 CSS를 사용하여 스타일을 변경하십시오! 작업 시운전 작업은 위 - 아래에 코딩되어 있습니다.