JQuery [ Tab ]

양혜정·2024년 4월 21일

JQuery 실행

목록 보기

20/42

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab 메뉴를 작성하면서 :eq(index번호) 에 대해서 알아봅니다.</title>

<link rel="stylesheet" href="css/04.css">

<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/04.js"></script>

</head>
<body>
   <div id="container"></div>
</body>
</html>

JS

$(document).ready(function(){

   const arr_data = [{'city':'런던',
                      'content':'런던 (영어: London)은 잉글랜드와 영국의 수도이다.',
                      'photo':'london.jpg'}
                   ,{'city':'파리',
                      'content':'파리(Paris)는 프랑스의 수도이다.',
                      'photo':'paris.jpg'}
                   ,{'city':'앙카라',
                      'content':'터키의 수도이다.',
                      'photo':'ankara.jpg'}
                    ];

//////////////////////////////////////////////////////////////////////////////

   let html = `<p>탭 메뉴를 선택해 보세요</p>
               <div id='tab'>`;

   arr_data.forEach(item => {
      html += `<button type="button">${item.city}</button>`;
   }) // end of arr_data.forEach(item => {})-----------------

   html += `</div>`;

/////////////////////////////////////////////////////////////////////

   arr_data.forEach(item => {

      html += `<div class= "content">
                     <h3>${item.city}</h3>
                     <p>${item.content}</p>
                     <img src='./images/${item.photo}' width='512px' height='288px'/>
               </div>`;

   }) // end of arr_data.forEach(item => {})------------

   $("div#container").html(html);

////////////////////////////////////////////////////////////////////////////////////////////

   // >>> === 클릭한 탭(버튼)만 내용물이 보이도록 하기 <<< ===   
   $(document).on('click', "div#tab > button", function(e){

      const index = $('div#tab > button').index($(e.target));
      // console.log("확인용 index => ", index);   // 0  1  2

      // 해당하는 index 만 보여주기
      $("div#container > div.content").css({"display":""});    // display : none;
     
      //$("div#container > div.content").eq(index).css({"display":"block"});
      // 또는
      $(`div#container > div.content:eq(${index})`).css({"display":"block"});

      $("div#tab > button").removeClass("active");

      $(e.target).addClass("active");

   });   // end of $(document).on('click', "div#tab > button", function(e){})--------

   $("div#tab > button").eq(0).trigger('click');

})  // end of $(document).ready(function(){})-----------------

CSS

    body {
      font-family: Arial;
    }

    div#container {
      width: 60%;
      margin: 0 auto;
      padding: 20px;
    }
   
    div#container > div#tab {
      border: solid 1px #ccc;
      background-color: #f1f1f1; 
      overflow: hidden;
    }
   
    div#tab > button {
      width: 100px;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px; 
      font-size: 17px;
      float: left;    
      /* 기본값 : left      / right 인 경우 1번이 맨 오른쪽으로 가서 왼쪽으로 점점쌓인다.
      /* 버튼과 버튼사이의 여백없이 계속해서 붙여가면서 하려고 하는 것임 */
   }
   
/*  hover
    div#tab > button:hover {
        background-color: #ddd; 
    } 
*/
   
    div#container > div.content {
        display: none;
        border: 1px solid #ccc;
        padding: 6px 12px;
        border-top: none;
    }
   
    .active {
      background-color: navy;
      color: white;
    }

정리

jQueryStudy -> 01_eventHandling -> chap06_addClass_removeClass_accordion_tab_SeatReservation -> 04_tabMenu_eq.html, 04.js, 04.css

양혜정

이전 포스트

JQuery [ Seat Reservation ]

다음 포스트

JQuery [ Tab ]

JQuery 실행

HTML

JS

CSS

정리

JQuery [ Seat Reservation ]

JQuery [ Accordion - next ]

0개의 댓글

관련 채용 정보