我正在关注此页面上的教程: http://www.henryhoffman.com/css-star-rating-tutorial.html HTML看起来像这样:
<ul class="rating">
<li><a href="#" title="1 Star">1</a></li>
<li><a href="#" title="2 Stars">2</a></li>
<li><a href="#" title="3 Stars">3</a></li>
<li><a href="#" title="4 Stars">4</a></li>
<li><a href="#" title="5 Stars">5</a></li>
</ul>
这样的CSS:
ul.rating{
background:url(../img/site_img/star.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
}
ul.rating li{
display:inline
}
.rating a {
display:block;
width:23px;
height:21px;
float:left;
text-indent:-9999px;
position:relative;
}
.rating a:hover {
background:url(../img/site_img/star.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
.rating a:active {
background-position:top;
}
我的问题是我不想要一个href,我不想被转移到页面上的另一个位置。我只想将值(1,2,3,4或5)存储在标签中,这样当按下按钮时我可以将该值传递给数据库。如果我选择了三颗恒星,我希望在按下星星之后将其中的三颗恒星进行整理,而不再使用恒星。
我该怎么做?
答案 0 :(得分:1)
我认为您可以将a hrefs
更改为跨度,因为CSS已经声明为display:block
这应该可行。同样在CSS中将rating a
更改为rating span
看看是否有帮助。
<ul class="rating">
<li><span>1</span></li>...
.rating span {
display:block;...
答案 1 :(得分:0)
这个我相似,应该让你走上正轨。这里有一些我没有包含的功能,但是你可以使用它。
这里是小提琴:http://jsfiddle.net/n76My/5/
var index=1;
$(".beeRating li").on({
mouseover: function() {
if(index==1)
{
$(this).addClass('stop');
$("li").each(function(index,domEle) {
$(domEle).css('opacity', '1');
if( $(this).hasClass('stop') ) {
return false;
}
})
}
},
mouseleave: function() {
if(index==1)
{
$(this).removeClass('stop');
$("li").each(function(index,domEle) {
$(domEle).css('opacity', '.25');
})
}
},
click: function() {
var rating = $(this).attr('id');
console.log(rating);
index=0;
$.ajax({ // do ajax request
url: "/echo/json/"
}).done(function() {
alert("success");
index=1; // on done set the index as 1
});
}
});