解决方案:
1.在data里面申明一个属性,默认值最好为数字类型,并且不得大于当前元素+所有兄弟元素的length,可以默认为0(第一个元素选中)
2.在当前元素中添加动态class: “:class”,使用v-bind进行绑定
3.给元素点击事件,传入当前元素的index,把元素当前的index赋值给data里面的申明的属性,这样就可以点击实现该效果
一.首先给想要添加class的元素,通过v-bind绑定一个class
二.在data中声明一个变量activeClass
三.在点击事件中
四.在style里面写想要的样式就可以了
方法一:
$("a").click(function(){$("a").attr("class", "")
$(this).attr("class", "XXXX")
})
原理就是点击某个<a>,先消除所有<a>的class,然后给当前的<a>添加class="XXXX"。这个写法最快捷。
方法二:
$("a").click(function(){if(lastclick) lastclick.attr("class", "")
$(this).attr("class", "XXXX")
lastclick = $(this)
})
这个的原理是点击一个<a>,把当前的对象赋给lastclick,下次点击的时候则先消除lastclick的class
你还有可以在此基础上添加一些额外的东西,比如将<a>的选择器加上其他更具体的限定,区别于其他不需要 *** 作的<a>。还有就是你可以是消除所有<a>的class,也可以是将所有<a>的class改为普通等。
大体思路:声明一个初始变量currentIndex,为0 就是第一个,为1就是第二个默认显示。点击的时候传入的currentIndex=index
html:
js:
css:
延伸拓展:
同样道理的,点击父级,改变对应子集的class,要如何做呢~
html:
注意:由于是循环,所以在最外层要套个<div>
js:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)