选项卡点击多选，再次点击取消选中，选项卡变色（uni)

一时失言乱红尘 2021-07-24 16:03 762阅读 0赞

## 效果 ##

![在这里插入图片描述][20201218101530667.png_pic_center]

## js部分 ##

redio_cli(e,ind){
    	this.xuanx.push(e)
    	console.log(this.xuanx)
    	let list = []
    	for (var i = 0; i < this.xuanx.length; i++) {
    		for (var o = 0; o < this.xuanx.length; o++) {
    			if(i != o && this.xuanx[i] == this.xuanx[o]){
    				list.push(this.xuanx[i])
    				// console.log(list)
    			}
    		}
    	}
    	// console.log(list)
    	// 判断重复删除
    	for (var i = 0; i < this.xuanx.length; i++) {
    		for (var o = 0; o < list.length; o++) {
    			if(i != o && this.xuanx[i] == list[o]){
    				this.xuanx.splice(i)
    				//上传的数据格式
    				let arr = ''
    				this.xuanx.forEach(it=>{
    					arr += it+','
    					this.xuanx_zj = arr.substr(0,arr.length -1)
    				})
    			}
    		}
    	}
    	//按钮变色
    	if (this.xuanxind.indexOf(ind) == -1) {
    		this.xuanxind.push(ind);//选中添加到数组里
    		console.log(this.xuanxind)
    	} else {
    		this.xuanxind.splice(this.xuanxind.indexOf(ind), 1); //取消
    	}
    }

## html ##

<view :class="xuanxind.indexOf(ind) != -1 ?'act' : 'yuan'" 
    v-for="(it,ind) in redio" :key="ind" @click="redio_cli(it,ind)">
    	{
       {it}}
    </view>

[20201218101530667.png_pic_center]: /images/20210724/28dade390ec3405b9de40582c3cc488f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，762人围观）

还没有评论，来说两句吧...

相关阅读

相关 JTabbedPane 点击+新建选项卡

JTabbedPane 点击+新建选项卡 1.需求描述 2.代码实现 3.效果演示 > 系统：Win10 > JDK：1.8.0\_333 >

墨蓝/ 2024年04月07日 14:43/ 0 赞/ 35 阅读

相关 JTabbedPane 点 x 关闭选项卡

JTabbedPane 点 x 关闭选项卡 1.需求描述 2.代码实现 3.效果演示 > 系统：Win10 > JDK：1.8.0\_333

小咪咪/ 2024年04月07日 14:43/ 0 赞/ 41 阅读

相关 vue 非必填项单选点击一下选中再次点击取消

<el-form-item label="标段异常状态" prop="biddingState"> <el-radio-group v-mode

偏执的太偏执、/ 2022年10月11日 00:54/ 0 赞/ 227 阅读

相关 uni-app选项卡组件

![20210620130001919.png][] <template> <view class="tab"> <scroll-view sc

左手的ㄟ右手/ 2022年10月08日 02:28/ 0 赞/ 346 阅读

相关点击显示再次点击隐藏

<script> $(function()\{ $('\a').click(function()\{//点击a标签 if($('

亦凉/ 2022年06月07日 09:06/ 0 赞/ 341 阅读

相关 js radio点击选中再点击取消

$(function(){ $('input:radio').click(function(){

柔光的暖阳◎/ 2022年06月01日 10:25/ 0 赞/ 364 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 316 阅读

相关 vue element tabs 点击链接切换选项卡

一、业务需求工作中，用到element UI的el-tabs组件，tabs里面有几个<el-tab-pane>现在需要在第一个<el-tab-pane>内容中点击某个

古城微笑少年丶/ 2022年03月17日 06:06/ 0 赞/ 956 阅读

相关 jquery checkbox点击选中，再点击取消选中

if(n==1){ if($("abs1").is(':checked')){ $("abs1"

刺骨的言语ヽ痛彻心扉/ 2021年12月04日 06:39/ 0 赞/ 425 阅读

相关选项卡点击多选，再次点击取消选中，选项卡变色（uni)

效果 ![在这里插入图片描述][20201218101530667.png_pic_center] js部分 redio_cli(e,ind){

一时失言乱红尘/ 2021年07月24日 16:03/ 0 赞/ 763 阅读