jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지]

by 조쉬 posted Jul 05, 2017
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

jquery를 이용해서 메뉴 목록에서 선택한 메뉴(탭, 버튼)를 활성화 시키고 나머지는 비활성화 시키기

 

<style type="text/css">
ul {list-style-type:none;max-width:200px;}
.list {border:1px solid #cccccc;padding:5px;} /* 기본 css 및 선택하지 않은 경우 */
.list.on {border:1px solid #000000;} /* 선택한 경우 css */
</style>

<ul>
 <li class="list"><a href="javascript:;">1. okkks.tistory.com</a></li>
 <li class="list on"><a href="javascript:;">2. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">3. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">4. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">5. okkks.tistory.com</a></li> 
</ul>

<script type="text/javascript">
$('li').click(function() {
 $('li').removeClass('on');
 $(this).addClass('on');
});
</script>