点击改变选项背景图(或其他)

开发环境

  • vue、jquery

需求

  • 点击某个选项,其选项图标改变,且鼠标移出之后,保持背景图片改变的效果

Paste_Image.png

简单分析

  • 选项的图标分为两种状态:未选中、选中状态,有一些还需加上一个hover状态
  • hover可以用css实现,但是如果选项过多,则代码过于冗长

实现方案

  • 选中状态的选项动态加上特殊类名用于标识
  • 同一选项的图片命名为aaa-1.png、aaa-2.png的状态
  • 利用jquery甄别特殊类名的方法,给拥有特殊类名的选项动态改变背景图片

主要代码实现

1.结构代码
<ul>
    <li class="item-0" :class="{'item-active' : active == 0}" @click="changeActive(0)"></li>
    <li class="item-1" :class="{'item-active' : active == 1}" @click="changeActive(1)"></li>
    <li class="item-2" :class="{'item-active' : active == 2}" @click="changeActive(2)"></li>
</ul>
2.vue-js代码
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    // 改变active值
    changeActive (index) {
      this.active = index;
      this.watchActive();
    },
    // 判断特殊类名:item-active,增加对应的样式
    watchActive () {
      for (var i = 0; i < 4; i++) {
        var checkClass = 'item-' + i.toString();
        var isActive = $('.' + checkClass).hasClass('item-active');
        if (isActive == false) {
          // 未被选中的选项,背景图为 xxx-1.png
          $('.' + checkClass).css('background-image', 'url("./image/' + checkClass + '-1.png")');
        } else {
          // 被选中的选项,背景图为 xxx-2.png
          $('.' + checkClass).css('background-image', 'url("./image/' + checkClass + '-2.png")');
        }
      }
    },
  }
}

————————– 分割线 ————————————-
2017.08.19

开发环境

  • 纯 jquery环境

源码查看地址

github: https://github.com/LucaLJX/jianshu_demo/tree/master/web%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/%E9%80%89%E9%A1%B9%E5%8D%A1%E7%82%B9%E5%87%BB%E6%9B%B4%E6%8D%A2%E8%83%8C%E6%99%AF%E5%9B%BE

主要代码实现

1.html代码
   <div class="menu">
        <ul>
            <li class="item-0 item item-active" onclick="clickItem(0)">选项卡一</li>
            <li class="item-1 item" onclick="clickItem(1)">选项卡二</li>
            <li class="item-2 item" onclick="clickItem(2)">选项卡三</li>
        </ul>
    </div>
2.js代码
$(document).ready(function () {
    watch();
});

function watch () {
    var length = $('.menu ul li').length;
    for (var i = 0; i < length; i++) {
        var checkClass = 'item-' + i.toString();
        var hasActive = $('.' + checkClass).hasClass('item-active');
        if (hasActive) {
            $('.' + checkClass).css('background-image', 'url("./icons/' + checkClass + '-red.png")');
        } else {
            $('.' + checkClass).css('background-image', 'url("./icons/' + checkClass + '-blue.png")')
        }
    }
}

function clickItem (index) {
    var length = $('.menu ul li').length;
    for (var i = 0; i < length; i++) {
        var clickClass = 'item-' + i.toString();
        if (index == i) {
            $('.' + clickClass).addClass('item-active');
        } else {
            $('.' + clickClass).removeClass('item-active');
        }
    }
    watch ();
}

如果有新的好方法,会持续更新。。。

BY–LucaLJX

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值