본문
1 html
2 css
.star_rating {font-size:0; letter-spacing:-4px;}
.star_rating a {
font-size:22px;
letter-spacing:0;
display:inline-block;
margin-left:5px;
color:#ccc;
text-decoration:none;
}
.star_rating a:first-child {margin-left:0;}
.star_rating a.on {color:#777;}
3 Jquery
$( ".star_rating a" ).click(function() {
$(this).parent().children("a").removeClass("on");
$(this).addClass("on").prevAll("a").addClass("on");
return false;
});
4 결과
'UI 개발 팁 > Jquery' 카테고리의 다른 글
| 간단한 셀렉트 드롭다운 제이쿼리 (4) | 2014.09.30 |
|---|---|
| 클릭하면 스크롤 이동하는 토글 제이쿼리 (FAQ, 트리메뉴) (0) | 2014.09.29 |
| 이미지 없이 구현하는 간단한 별점 기능 제이쿼리 (9) | 2014.07.30 |
| Select, Checkbox 멀티셀렉트 드롭다운 제이쿼리 [업데이트] (8) | 2014.07.02 |
| 썸네일 클릭하면 큰 이미지가 바뀌는 포토갤러리 제이쿼리 (0) | 2014.07.02 |
Tags
트랙백과 댓글 여닫기
Trackback: 0 Comment: 9댓글 목록
-
오~ 심플한 코딩 멋지네요~2014.07.30 18:04 신고
-
감사합니다. ^^2014.07.31 11:27 신고
-
-
초보 Edit/Delete REPLY URL
똑같이 해 보았는데 결과 같이 안나오네요ㅠㅠ
다른 별을 눌러도 별 색깔이 안바껴요ㅠ2015.09.20 17:02 신고-
1. 제이쿼리 라이브러리 로드해야 하고
2. 호출 스크립트로 감싸야합니다.
호출스크립트 참고 : http://uidevelop.tistory.com/92015.09.21 09:31 신고
-
-
박유정 Edit/Delete REPLY URL
감사합니다!! 별점 만드는거 걱정햇는데 너무 쉬워요!!!!!!!!!2016.11.22 11:21 신고
-
워드프레스에 삽입하려면 어떻게 해야하나요..??2017.05.24 17:31 신고
-
http://blog.naver.com/juyong123/220197454289 이내용을 보면서 하고있습니다2017.05.24 17:31 신고
-
-
달걀한개 Edit/Delete REPLY URL
좋은 정보 감사합니다.2017.08.21 13:02 신고
-
mong Edit/Delete REPLY URL
별점코딩이 처음이라 완전 -_-;; 어찌해야하나 고민중이었는데 덕분에 해결하고 갑니다. 님 진심 감사합니다.2017.09.24 17:54 신고