JQuery : sibling 선택요소에 형제요소 사용해보기 + active

html

<div class="btn">
    <span >공지사항</span>
    <span>갤러리</span>
  </div>

 

css.

 .btn {
     
      width: 300px;
    }

    .btn span {
      background-color: #ccc;
      padding: 5PX;
      width: 100px;
      display: inline-block;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
    }

    .btn span.active {
      background-color: #fff;
      border: 1px solid black;
    }

js.

$('.btn span').click(function(){
  $(this).addClass('active')
  $(this).siblings().removeClass('active')
})

원하는 기능 :  공지사항을 누를땐 갤러리가 흰색이 되면 좋겠다.

 

 

구현

 

1. 형제 요소를 주기위해선 같은 부모밑에 있어야 한다.

2. css 에서 span형제 태그를 .active 라는 클레스 요소를 하나 만들어 꾸며준다 

3.  js에서 해당 span을 클릭했을때 addClass를준다 ( 'active') = 여기서 (' . active ' ) 이렇게 해주면 안된다.

4. 그럼 내가 공지사항을 클릭하면 거기에 active라는 요소가 추가가 되는것이다.

5. 그아래 siblings( ) . removeClass('active')를 해주는걸 해석하자면

자기자신의 형제에게 active 클레스를 지워줘라 이런 얘기다. 원래는 siblings ( ) 괄호안에 어떤 형제인지 넣어도 되는데

내가 쓰는 예제는 하나밖에 없으니 따로 안써줘도 된다.