CSS 및 자바 스크립트를 사용하는 탭 요구 사항

Question

다음 요구 사항을 충족합니다.

스포츠 학생에 대한 세부 정보를 저장하는 프런트 엔드는 학교에 있습니다. 예를 들어, 학생 xyz는 크리켓을 사용하여 데이터베이스가 크리켓 세부 정보를 저장하고 학생 pqr이 축구를 실행하므로 데이터베이스에 축구 정보가 저장됩니다.

메인 화면은 두 부분으로 나뉩니다. 왼쪽 섹션은 사용자가 입력 할 수있는 몇 가지 기준이있는 검색 섹션입니다. 검색 결과를 클릭하면 결과가 요약 섹션에 게시됩니다.

예 : x를 검색 할 때 5 명의 학생이 나온다면 요약 결과는 5 행이됩니다.

요약 결과에서 특정 학생을 클릭하면 해당 학생과 관련된 모든 다른 세부 정보를 가져 와야하며 같은 섹션에 새 탭으로 게시해야합니다. Occupation in One (한 작업) 탭과 마찬가지로 그의 스포츠는 다른 탭에서 자세히 설명됩니다.

1) 어떻게 CSS와 자바 스크립트를 사용하여 이것을 달성 할 수 있습니까? 2) 다른 탭을 비활성화 된 상태로 유지하는 방법은 무엇입니까? 예를 들면. 크리켓 경기 학생 탭에서 축구 탭을 사용할 수 없습니다.

저는 CSS와 JS에서 매우 새롭습니다. 따라서 제 요구 사항은 내가 느끼는 것처럼 복잡하지 않을 수 있습니다. 그러나 나는 출발점을 확실히 요구한다.

Answer 1

각 탭마다 별도의 <div> 섹션을 사용하고 각 div에서 클래스 사용 방법을 설명하는 클래스 속성을 지정하십시오. style.visibility 속성을 수정하여 div를 숨기거나 표시 할 수 있습니다 (div를 숨기려면 '숨김'으로 설정하고, 대부분의 경우 'div'를 표시하려면 '차단'). CSS를 사용하여 각 div (예 : 페이지의 위치)에 다른 스타일을 적용 할 수 있습니다.

개인적으로 나는 이것을 세 가지 다른 작업으로 나눌 것입니다. 첫 번째 작업은 가짜 데이터를 사용하여 페이지의 레이아웃을 올바르게 설정하는 것입니다 (예 : 데이터를 '가져 오는'기능을 생성하지만 실제로는 미리 준비된 데이터 만 제공). 두 번째 작업은 데이터베이스의 데이터를 기반으로 처리되지 않은 원시 데이터 (JSON 형식이 바람직 함)를 반환 할 수있는 요청 처리기를 제공하는 것입니다. 세 번째 마지막 작업은 사용자 인터페이스에서 JavaScript를 연결하여 실제로 이러한 종점에 대한 XHR 요청을 사용하여 데이터를 가져 와서 가짜 데이터를 전달하는 대신 JSON 응답을 적절히 전달하는 것입니다.