两个css之间的切换

需求: 头部两个按钮 两种样式之间的切换

     

解决办法: 结合JQ  三目运算 来处理

第一步: 把需要切换的样式设置为样式里背景,这样做的目的为了避免 js里出现过多 css代码

     二来这样会显得更加的清晰,明了

 第二步

         运用JQ 和 三目运算进行样式的快捷切换

      此处强调下 采用三目运算的目的是为了筛选样式名,避免if语句的冗杂,使代码显得更加的清晰

changeClass: function(dom,cur,pre) {
            $(dom).removeClass($(dom).hasClass(pre) ? pre : '');
            $(dom).addClass(cur);

            $(dom).siblings().removeClass($(dom).hasClass(cur) ? cur : '');
            $(dom).siblings().addClass(pre);
        },

参数说明:

             dom: 点击的元素

             cur:  激活时候的className

             pre:  未激活时的className

 

这样就可以实现两个元素或更多元素,两个样式间的切换~~~

posted @ 2018-04-09 17:50  耗子圈码  阅读(679)  评论(0编辑  收藏  举报