ul点击li,增加样式
用户首次绑定后,需要选择一款头像
<!--imgList头像列表-->
<el-row class="regModel1">
<el-col :span="24" class="stepTwo">请选择一个形象作为您的头像吧!</el-col>
<el-col :span="24" class="zooSelect">
<ul class="zooIcon">
<li v-for="(item, index) in imgList" @click="selectIcon(item ,index)">
<div class="imgzoo fn-rel" :key="item.key">
<img :src="item.value" alt="">
<i class="el-icon-success fn-abs" :class="{'colorShow': index === cwtx}"></i>
<p>{{item.remark}}</p>
</div>
</li>
</ul>
</el-col>
<el-col :span="24" class="stepfinish"><button class="nextBtn" @click="finBtn">完成</button></el-col>
</el-row>
/*
*选择用户头像
*/
selectIcon(item,index) {
this.cwtx = index
this.selectKey = item.key
},
ul点击li,增加样式的更多相关文章
- 设置ul的指定li 样式
设置ul的最后li 的样式 .custom-consumerIndex .card-content .list-block ul li:last-child .item-inner { border- ...
- ul 、ol li 继承原有样式的问题
如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
- 对Ul下的li标签执行点击事件——如何获取你所点击的标签
问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...
- easyUI在使用字符串拼接时样式不起作用,点击加号增加一行,点击减号删除一行效果。
拼接的按钮没有样式,需要使用 var str = $("<a href='javascript:void(0)' class='easyui-linkbutton' onclick=' ...
- jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...
- jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码
转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next() : 获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...
- jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...
- jq 鼠标点击跳转页面后 改变点击菜单的样式代码
点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...
- Vue实现点击li变色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- RadioButton使用
RadioButton和CheckBox差不多,这里只写一个,因为我本身不是学andorid,所以就当给自己留一个备份,省的每次用到都需要代码敲一次,很麻烦 1.如果想选中时想改变颜色可以设置一个xm ...
- k皇后
http://www.cnblogs.com/drizzlecrj/archive/2007/10/04/913703.html
- Windows下安装centOS7双系统总结
首先,按照网络教程,使用硬盘安装模式(失败): 一.使用分盘工具(easeUS Partion Master)分出一块未使用的空间,为安装centOS和保存镜像文件作准备. 二.将分出来的一部分空格, ...
- vue-devtools : vue的调试工具及log显示工具 vconsole
使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化.另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验. 注意:请留意如果页面使用了一个生产环境 ...
- 96A
#include <iostream> #include <string> #include <cctype> using namespace std; int m ...
- Mongodb 基础 数据导入导出和用户管理
数据导出 导出命令使用方式 mongoexport---->csv/json使用 参数: -d 库名 -c 表名 -f field1,field2....列名 -q 查询条件 -o 导出文件名 ...
- 使用 Oracle Data Access Components连接oracel
使用微软自带的oracle连接类,在framework4.0中被标识为弃用,强行用它开发了Winform程序,发布放到XP上提示: Error System.Data.OracleClient req ...
- [LeetCode] 106. Construct Binary Tree from Postorder and Inorder Traversal_Medium tag: Tree Traversal
Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- 记前些日子archlinux更新后无法调节声音的解决方法
桌面环境用的是xfce4. 自从某次更新过后,panel中调节声音的插件变成了 xfce4-pulseaudio-plugin.然后就发现在panel中无法调节声音了. 在这个插件的属性中发现了一项设 ...
- Python记录5:函数1
函数 ''' 1. 什么是函数 在程序中具备某一功能的工具->函数 函数的使用必须遵循原则: 先定义 后调用 函数分为两大类: 1 ...