简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:1000 次  日期:2014-10-15 09:10:45

温馨提示:易贤网小编为您整理了“按价格排序的小三角图标替换效果jquery”,方便广大网友查阅!

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代码中的图片路径,大小等显示正常后,点击文字就可以看到效果

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:node.js javascript开发
下一篇:jquery获取从子frame获取兄弟frame节点并赋值
易贤网手机网站地址:按价格排序的小三角图标替换效果jquery
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!