JS_실습예제02 _ 제어문을 활용한 탭메뉴 구현하기

실습예제02 _ 제어문을 활용한 탭메뉴 구현하기

• 탭 콘텐츠(tap-content) : 제한된 공간 안에서 메뉴를 클릭시 해당 영역안에서만 콘텐츠 내용이 보이도록 하는 콘텐츠 제작 방법이며, 여러개의 메뉴를 통해 다양한 내용을 보여줄 수 있다는 장점이 있음

• CSS로는 라디오 버튼을 통해 제작이 가능하며, javascript에서는 반복문을 통해 제작이 가능함

• 또한 jquery에서는 '문서객체조작' 메서드를 통해 제작이 가능해서 어떤 언어로 사용해도 모두 가능함

• 이미지 5장을 사용하여 섬네일 이미지 클릭시 해당 사진 보여주기

  
        //큰 사진 변경을 위한 변수 저장
        let b_img = document.querySelector('#big_img');
        // class명은 getElementsByClassName(): 클래스명 지정 또는 querySelectAll() : 내가 선택한 것을 다 담겠다는 의미
    
        //작은 섬네일 사진 변수로 저장하기
        let s_img = document.querySelectorAll('.small');
    
        //반복문을 사용해 목록ul안에 있는 img를 개별적으로 선택하여 각 '클릭이벤트'를 만듬
          _ 이미지는 클릭이 안되니가 클릭 이벤트로 클릭 할 수 있게 만들어 준다는 것임
        for(let i=0;iᐸs_img.length;i++){  //  i ᐸ 5;  s_img.length; i가 이미지의 개수만큼 반복을 하겠다는 의미
          console.log(s_img[i]);
          s_img[i].addEventListener('click',function(){
            // window.alert('클릭이벤트 실행');
            let src = this.src;//사용자가 선택한 이미지의 src 주소값을 불러와 변수에 담음
            console.log(src);
    
            //src변수값을 big_img에 대입하여 이미지가 변경되도록 함
            b_img.setAttribute('src', src);  //setAttribute('속성이름','속성값')
    
            for(let j=0;jᐸs_img.length;j++){
              console.log(s_img[j]);
              s_img[j].style.filter='grayscale(1)';
              this.style.filter ='grayscale(0)';
            }
          });
        }