클릭한 요소만 css 요소를 추가하는 방법 (.find()) + 클릭했을 때 특정 요소만 보여지기

HTML

<ul class="title">
  <li class="hover">라디오광고·방송광고</li>
  <li>광고음악·로고송</li>
  <li>교가·시가</li>
  <li>성우녹음·더빙</li>
  <li>사운드디자인·음향</li>
</ul>

CSS

#portfolio ul.title li.hover {
  background-color: #ccc;
  transition: all .2s;
}

jQuery

$('.title li').on('click', function(){
  $('.title').find(".hover").removeClass('hover');
  $(this).addClass('hover');
});

.find()는 하위 요소를 찾으므로 li의 '.hover'을 찾기 위해서는 그의 부모요소인 '.title'에 적용해야 한다.

 

적용예시

+)클릭한 요소에 관련된 요소만 보여지게 하는 방법 (2개)

HTML

<!-- 클릭할 버튼 -->
<ul class="button">
  <li class="btn a">추천인 아이디</li>
  <li class="btn b active">참여 이벤트명</li>
</ul>

<!-- 클릭한 버튼에 따라 보여질 요소 -->
<div class="id">
  <input type="text" placeholder="추천인 아이디를 입력해주세요." />
  <button>확인</button>
</div>
<select class="event">
  <option value="">참여 이벤트 코드</option>
  <option value="1">이벤트1</option>
  <option value="2">이벤트2</option>
  <option value="3">이벤트3</option>
</select>

JS

$('.btn').on('click', function(){
  $('.button').find('.active').removeClass('active');
  $(this).addClass('active');
  if($(this).hasClass('active')){
    if($(this).hasClass('b')){
      $('.id').css({"display":"none"})
      $('.event').css({"display":"block"})
    } if($(this).hasClass('a')) {
      $('.id').css({"display":"block"})
      $('.event').css({"display":"none"})
    }
  }
});

2개까지가 사용하기 좋은 것 같고 3개 이상일 때는 다른 기능을 찾아야 할 것 같다