본문 바로가기
✨ Front-end/자바스크립트(JS)

[JavaScript] 상품 리스트 만들어보기

by 환풍 2023. 2. 20.
728x90
반응형

Bootstrap을 이용해 상품을 만들어 버튼을 눌리면 하나 하나씩 볼 수 있도록 만들어보았다.

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
    <script src="result.js"> </script>
    
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
   
   
      <div class="container mt-5">
        <ul class="list">
          <li class="tab-button">신발 상품1</li>
          <li class="tab-button orange">신발 상품2 </li>
          <li class="tab-button">신발 상품3</li>
        </ul>
        <div class="tab-content">
          <p>정보</p>
          <img src="http://kuku-keke.com/wp-content/uploads/2020/04/2514_4.png"width="200" height="200" />
        </div>
        <div class="tab-content show">
          <p>정보</p>
          <img src="https://littledeep.com/wp-content/uploads/2020/06/shoes_illustration_style2.png" width="200" height="200"/>
        </div>
        <div class="tab-content">
          <p>정보</p>
          <img src="https://kuku-keke.com/wp-content/uploads/2020/05/2771_5.png"width="200" height="200"/>
        </div>
      </div> 
 
 
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
      
</body>
</html>
 
 
cs

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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;
  }
cs

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.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');
});
 
$('.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');
});
 
$('.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');
});
cs

먼저 tab-button을 다 찾아준다. 이 상태에선 아무거나 눌러도 코드가 실행된다.

그래서 바로 뒤에 .eq(0) 을 추가해준다. 이것은 querySelectorALL('.tab-button')[0]  이거랑 비슷하다.

이 코드를 반복문을 돌려서 풀려고 했으나, 제대로 작동하지 않아서 그냥 어떻게 쓰는지만 알아두었다.

아직까지 js를 쓰는게 많이 불편하다...

 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

728x90
반응형
저작자표시 비영리 변경금지

'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글

[JavaScript] var, let, const의 변수 선언 방식과 각각의 차이  (0) 2023.03.03
[JavaScript] 배열(Array)과 객체(Object) 차이, innerHTML 사용법  (0) 2023.02.25
[JavaScript] jQuery 이용해서 이미지 슬라이드 만들기 (캐러셀)  (0) 2023.02.19
[JavaScript] 타이머 예제 setInterval, clearInterval, timeOut  (1) 2023.02.19
[JavaScript] if문으로 HTML 배경 Dark, White모드 만들기  (0) 2023.02.19

관련글

댓글

티스토리툴바