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
 },



原文地址:https://www.cnblogs.com/xuyan1/p/8320871.html

时间: 2024-10-06 18:25:39

ul点击li,增加样式的相关文章

设置ul的指定li 样式

设置ul的最后li 的样式 .custom-consumerIndex .card-content .list-block ul li:last-child .item-inner { border-bottom: 0px !important; } 详情 https://blog.csdn.net/qq_16390749/article/details/59570110 原文地址:https://www.cnblogs.com/lgq168/p/9990646.html

ul li CSS 样式(转)

ul li CSS 样式_无情无绪_新浪博客 http://blog.sina.com.cn/s/blog_61352f210100eqeq.html 列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉.样式表为列表增加了一些功能,控制列表的样式包括列表样式.图形符号.列表位置三个部分.1.列表符号列表符号是指显示于每一个列表项目前的符号标识.基本格式如下:list-style-type:参数参数取值范围:·disc:圆形·c

点击ul中的li弹出其索引值

html结构 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> JQuery实现: $("ul").on("click","li",function(){ var index=$("li").index($(this)); alert(index)

jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HTML结构:设计三个li元素 <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> 2.css样式:设计一个类selecte

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTML结构:设计三个li元素 <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> 2.css样式:设计一个类selected

jq 鼠标点击跳转页面后 改变点击菜单的样式代码

点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" src="../images/c_bg01.gif" /> <ul> <a href="x_bumen.php"><li>部门设置</li></a> <a href="x_yhshez

jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码

转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元素后插入指定的内容. 综合起来,核心代码为 $(".content li").click(function() {       // 点击li元素时     if($(this).next())                    // 如果存在下一个元素         $(this)

JavaScript点击li显示索引

有一个ul,ul里面有几个li,如果需要点击li打印出此li对应的索引号该怎么做呢? 最开始的想法是: <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ul> <script type="text/javascript"> var lis=document.getElementsByTagName(&q