我不会写文章,只是把前端学习jquery的一些经验和大家分享一下,希望能够帮助一下需要学习或者是想要某个效果但是一时想不出怎么做的朋友!
先看上图,想要达到的效果是点击价格排序时箭头向上或者是向下,点击销量排序时箭头也向上向下,两个是相互不干扰的。根据网络上的介绍,有一种方法就是利用插件,jQueryRotate.js,但是我看过感觉好乱,为了实现一个效果要加那么多东西,不是很好~
这里是自己写的jquery,仅供参考~~
样式代码
.bb{margin:0 auto;width:1000px;}
.aa i{float:left;width:128px;height:128px;}
.arrow1{background: url(img/top.png) no-repeat;}
.arrow2{background: url(img/top1.png) no-repeat;}
解释:top.png是向上的箭头,top1.png是向下的箭头,自己去网络上下载图片
jquery代码
$(".bb div").click(function(){
var i=$(".bb div").index($(this));
$(".aa > i").eq(i).toggleClass("arrow2");
});
记得要调用jquery.js文件,才会有效果~