[JS] for문 관련 메모 (1)

728x90

준비물

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <!-- 8) for 문 탭기능 -->
    <div class="container mt-5">
      <ul class="list">
        <li class="tab-button">Products</li>
        <li class="tab-button orange">Information</li>
        <li class="tab-button">Shipping</li>
      </ul>
      <div class="tab-content">
        <p>상품설명입니다. Product</p>
      </div>
      <div class="tab-content show">
        <p>스펙설명입니다. Information</p>
      </div>
      <div class="tab-content">
        <p>배송정보입니다. Shipping</p>
      </div>
    </div>
    <!-- 스크립트 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="tab.js"></script>
  </body>
</html>

CSS

.navbar {
  position: fixed;
  width: 100%;
  z-index: 5;
}
.navbar-brand {
  font-size: 30px;
  transition: all 1s;
}
/* detail.html */
ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
ul.list::after {
  content: "";
  display: block;
  clear: both;
}
.tab-button {
  display: block;
  padding: 10px 20px 10px 20px;
  float: left;
  margin-right: -1px;
  margin-bottom: -1px;
  color: grey;
  text-decoration: none;
  cursor: pointer;
}
.orange {
  border-top: 2px solid orange;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid white;
  border-left: 1px solid #ccc;
  color: black;
  margin-top: -2px;
}
.tab-content {
  display: none;
  padding: 10px;
}
.show {
  display: block;
}

버튼 눌렀을 때 버튼 누른 효과 - .orange

버튼 눌렀을 때 div 박스 보여주기 - .show

첫 버튼만 기능 개발
- 버튼0 기능

- 버튼0 누르면

- 버튼 (어떤버튼인지는 모름) 에 붙은 orange 클래스명 제거

= 모든 버튼에 붙은 orange 클래스명 제거

- 버튼0에 orange 클래스명 부착

- 박스0에 show 클래스명 부착 ( 첫 번 째 div 박스 보여주기 )

= 기존에 있던 모든 show 클래스 다 제거해야함

*기존에 붙어있던 orange, show 라는 클래스는 제거

- 버튼0,1,2에 붙어있던 orange 클래스명 전부 제거하라고 코드 3줄 짜기
- 버튼0에 orange 클래스명 부착
- 박스0,1,2에 붙어있던 show 클래스명 전부 제거하라고 코드 3줄 짜기
- 박스0에 show 클래스명 부착

tab-button라는 클래스를 가진 모든 것에 이벤트 리스너 달기

$('.tab-button').on() 이렇게 이벤트리스너 달면

3개 버튼에 전부 이벤트리스너를 닮

$(".tab-button").on("click", function () {});

= *제이쿼리로 달기*

버튼0만 달고 싶으면

$('.tab-button').eq(0).on('click', function(){
  
});

$( ) 셀렉터로 찾은 요소 중에 x번째 요소만 선택하고 싶으면
= $( ).eq(x)

버튼0 누르면
버튼0,1,2에 붙어있던 orange 클래스명 전부 제거

**생 자바스크립트로 쓸 경우

일일이 첫 번째 두 번째 세 번째 찾아서 제거해달라고 해야함

$(".tab-button")
  .eq(0)
  .on("click", function () {
    $(".tab-button").removeClass("orange");
  });

버튼 0 누르면

tab-button 클래스 를 갖고있는 모든 div 에서 orange 클래스를 제거.

버튼0에
orange 클래스명 부착

    $(".tab-button").eq(0).addClass("orange");

버튼 0에다가

orange Class 추가해주기.

div 박스 0,1,2에 붙어있던
show 클래스명 전부 제거
- div 박스를 찾기

  $("tab-content").removeClass("show");

모든 div 태그에 붙어있는 show 클래스 제거

박스0에 show 클래스명 부착

  $("tab-content").eq(0).addClass("show");

버튼 0,1,2 기능 구현

// 버튼 첫 번째거 = 버튼 0
$(".tab-button")
  .eq(0)
  .on("click", function () {
    $(".tab-button").removeClass("orange");
    $(".tab-button").eq(0).addClass("orange");
    $("tab-content").removeClass("show");
    $("tab-content").eq(0).addClass("show");
  });
// 버튼 두 번째거 = 버튼 1
$(".tab-button")
  .eq(1)
  .on("click", function () {
    $(".tab-button").removeClass("orange");
    $(".tab-button").eq(1).addClass("orange");
    $(".tab-content").removeClass("show");
    $(".tab-content").eq(1).addClass("show");
  });
// 버튼 세 번째거 = 버튼 2
$(".tab-button")
  .eq(2)
  .on("click", function () {
    $(".tab-button").removeClass("orange");
    $(".tab-button").eq(2).addClass("orange");
    $(".tab-content").removeClass("show");
    $(".tab-content").eq(2).addClass("show");
  });

비슷한 코드덩어리 6줄이 3번이나 반복

반복적인 셀렉터는 변수에 넣어서 쓰기

var 버튼 = $('.tab-button');
// 버튼 0 기능
버튼.eq(0).on('click', function(){
  버튼.removeClass('orange');
  버튼.eq(0).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(0).addClass('show');
})

//비교)  버튼 첫 번째거 = 버튼 0
$(".tab-button")
  .eq(0)
  .on("click", function () {
    $(".tab-button").removeClass("orange");
    $(".tab-button").eq(0).addClass("orange");
    $("tab-content").removeClass("show");
    $("tab-content").eq(0).addClass("show");
  });

728x90

저작자표시 비영리 변경금지

'> 메모 > JS' 카테고리의 다른 글

[JS] 까먹은 이벤트 버블링과 이벤트 함수들 (0)	2024.03.31
[JS] for문 관련 메모 (2) (0)	2024.03.31
[JS] 스크롤 이벤트 메모 (0)	2024.03.31
[JS] 폼 전송 막는 방법 (0)	2024.03.22
[JS] 헷갈리는 else if 사용 법 (0)	2024.03.22

IT 아카이브

[JS] for문 관련 메모 (1)

'> 메모 > JS' 카테고리의 다른 글

티스토리툴바

[JS] for문 관련 메모 (1)

'> 메모 > JS' 카테고리의 다른 글

관련글

티스토리툴바