테스트 사이트 - 개발 중인 베타 버전입니다

이미지 없이 구현하는 간단한 별점 기능 제이쿼리

· 9년 전 · 507

 

<p class="star_rating">

    <a href="#" class="on">★</a>

    <a href="#" class="on">★</a>

    <a href="#" class="on">★</a>

    <a href="#">★</a>

    <a href="#">★</a>

</p>

 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;}

 

Jquery

 

 

$( ".star_rating a" ).click(function() {

     $(this).parent().children("a").removeClass("on");

     $(this).addClass("on").prevAll("a").addClass("on");

     return false;

});

 

★ ★ ★ ★ ★

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

프로그램

글쓰기