实现:第一个li我默认它是被点击后的样式,当我点击另一个的li后,点击的那个li为点击后的样式,第一个li和其它未被点击的li一样为普通的样式。
Vue
1.遍历出来, 在click中赋值 遍历出来的mx。
2.class进行决定是否显示,一点击就把对应的mx赋到activeName中
3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了
4.让第一个默认选中。就是把activeName放一个数值就行了
<template>
<div id="app">
<ul>
<li v-for="(mx, key) in list" @click="ck(mx)" :class="[{active: activeName == mx}]">
{{mx}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ['网易', '腾讯', '爱奇艺', '优酷', '土豆', '斗鱼'],
activeName: '网易'
}
},
methods: {
ck(mx) {
this.activeName = mx
}
}
}
</script>
<style lang="less">
.box {
list-style: none;
text-align: center;
padding: 0;
width: 85%;
margin: auto;
margin-top: 30px;
ul {
list-style: none;
text-align: center;
li {
padding: 15px;
border-radius: 30px;
}
li.active {
color: red;
transition: all .8s;
background: #000;
color: #fff;
}
}
}
</style>
jQuery
就是让第一个选中,其他的不选中;当点击后当前选中,其他不选中。
$('ul').on('click', 'li', function(e){
$('ul li').removeClass('active');
$(e.target).addClass('active');
});