샘플 html #1
li tag 의 클래스 명이 'second' 인 것만 제외 하고 css 적용시키는 예
<div id="test-code-1"> <ul class="ui list"> <li class="first">Gaining Access</li> <li class="second">Inviting Friends</li> <li class="third">Benefits</li> <li class="fourth">Warranty</li> </ul> </div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> var $except = $('#test-code').find('ul>li.second'); $('#test-code-1').find('ul>li').not($except).css({ 'color': 'orange', 'font-weight': 'bold' }); </script>
Demo
- Gaining Access
- Inviting Friends
- Benefits
- Warranty
샘플 html #2
li tag 중 클릭한 li tag와 클릭하지 않는 li tag 에 다른 css 적용시키는 예
<div id="test-code-2"> <ul class="ui list"> <li class="first">Gaining Access</li> <li class="second">Inviting Friends</li> <li class="third">Benefits</li> <li class="fourth">Warranty</li> </ul> </div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $('#test-code-2').find('ul>li').bind('click', function () { $except = $(this); $except.css({ 'color': '#555', 'font-weight': 'normal' }); $('#test-code').find('ul>li').not($except).css({ 'color': 'orange', 'font-weight': 'bold' }); }); </script>
Demo
- Gaining Access
- Inviting Friends
- Benefits
- Warranty
'Javascript > jQuery' 카테고리의 다른 글
[jQuery 함수] has() 특정 element를 자식으로 가지고 있는 dom element 선택하기 (0) | 2015.07.27 |
---|---|
[jQuery 함수] $.trim() 문자열 공백 제거하기 (0) | 2015.07.27 |
[jQuery 함수] clone() dom element 복사하기! (0) | 2015.07.27 |
[jQuery 함수] after(), before() 이용해서 DOM 위치 이동시키기 (0) | 2015.07.27 |
jquery 비 동기 통신 $.ajax(), $.get(), $.post() 사용방법 (0) | 2015.07.07 |