网站制作学习网JS脚本→正文:按价格排序的小三角图标替换效果jquery
字体:

按价格排序的小三角图标替换效果jquery

JS脚本 2012/2/6 17:47:45  点击:不统计

学习www.网for站asp制.cn作
 html代码:
<div class="price" title="点击按价格从高到低排序">按价格排序<span class="price_asc"></span></div>

jquery代码:
$(".price").click(function(){
 $(this).children("span").toggleClass("price_desc");
})
$(".price").toggle(function(){$(this).attr("title","点击按价格从低到高排序");},function(){$(this).attr("title","点击按价格从高到低排序");})

CSS代码:
.price{cursor:pointer;position:relative;width:73px;}
.price span{position:absolute;top:7px;right:0;margin-left:5px;width:8px;height:4px;background-image:url(../images/price.png); background-repeat:no-repeat;}
.price .price_asc{background-position:0 0;}
.price .price_desc{background-position:0 -6px;}

修改css代码中的图片路径,大小等显示正常后,点击文字就可以看到效果

·上一篇:jQuery hover 与 mouseover 与mouseout 的区别 >>    ·下一篇:Extjs 教程-对话框 >>
推荐文章
最新文章