jQuery에서 탭 작업

Shraddha Paghdar 2024년2월15일

jQuery jQuery Tabs

오늘 포스팅에서는 jQuery의 탭에 대해 알아보겠습니다.

jQuery의 탭

탭은 여러 영역이 있는 단일 콘텐츠 영역으로, 각 영역은 목록의 제목과 연결되어 있습니다. 탭은 일반적으로 공간을 절약하기 위해 아코디언처럼 교체할 수 있는 여러 섹션으로 콘텐츠를 나누는 데 사용됩니다.

탭에는 올바르게 작동하는 데 사용해야 하는 선택된 마크업 세트가 있습니다.

tabs 자체는 Ordered 또는 Unordered 목록에 있어야 합니다.
각 탭 제목은 목록 요소 안에 있어야 하며 래핑할 href 속성이 있는 앵커와 함께 있어야 합니다.
각 탭 패널은 모든 유효한 요소일 수 있지만 연결된 탭의 앵커에 있는 해시와 일치하는 ID가 있어야 합니다.

모든 탭 패널의 콘텐츠 자료는 웹 페이지에서 정의하거나 Ajax를 통해 로드할 수 있습니다. 둘 다 탭과 연결된 앵커의 href를 기반으로 자동으로 처리됩니다. 기본 탭을 사용하면 클릭 시 해제됩니다.

그러나 이벤트 옵션 위로 마우스를 가져가도록 이벤트를 수정할 수 있습니다. 다음 예를 통해 이해해 봅시다.

코드 - HTML:

<ul id="tabs">
  <li><a id="home">Home</a></li>
  <li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>

코드 - CSS:

#tabs {

   width: 100%;
    height:30px;
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;


}
a {cursor:pointer;}

#tabs li {
    float:left;
    list-style:none;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    margin-right:5px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px;
    display:block;
    background: #FFF;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    text-decoration:none;
    outline:none;

}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}

.container {

    clear:both;
    width:100%;
    border-left: solid 1px #CCC;
      border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
    text-align:left;
  padding-top: 20px;

}

.container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

코드 - 자바스크립트:

$(document).ready(function() {
  $('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  $('#tabs li a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) {
      $('#tabs li a').addClass('inactive');
      $(this).removeClass('inactive');
      $('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });
});

위의 예에서 모든 탭을 나열하는 ul 태그가 있는 탭을 정의했습니다. 탭의 내용은 기본적으로 hide 방법을 사용하여 숨겨지고 기본적으로 first 탭이 표시됩니다.

사용자가 탭을 클릭하면 모든 목록 요소에 .inactive 클래스를 적용하고 선택한 목록 요소에서 .inactive 클래스를 제거합니다. 이렇게 하면 지정된 시간에 선택한 목록 요소만 활성화됩니다.

jQuery를 지원하는 모든 브라우저에서 위의 스니펫을 실행하면 다음 결과가 표시됩니다.

출력:

jQuery에서 탭으로 작업하기

코드 실행

작가: Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.