JS实现按钮切换功能-CSDN博客

本文链接：https://blog.csdn.net/qiudechao1/article/details/102968355

实现功能：

1. 三个按钮，点击按钮高亮，每次只能高亮一个按钮，且同一按钮多次点击会在高亮和熄灭之间切换。

2. 选中哪个按钮，需要记录值并传参。

HTML框架

<div class="u-btn-box">
	<span class="u-btn f-dfc" id="dateType1">本日</span>
	<span class="u-btn f-dfc" id="dateType2">本月</span>
	<span class="u-btn f-dfc" id="dateType3">本年</span>
</div>

<input id="dateType" type="hidden" value="">

JS代码

//点击本日，则本日高亮，并取消本月、本年的高亮，并将隐藏input属性设置为day
$("#dateType1").click(function(){
	$("#dateType1").toggleClass("active");
	$("#dateType2").removeClass("active");
	$("#dateType3").removeClass("active");
	//document.getElementById("dateType").value = 'day';
	if($("#dateType1").hasClass("active")){
		$("#dateType").val('day');
	}else{
		$("#dateType").val('');
	}
})
$("#dateType2").click(function(){
	$("#dateType1").removeClass("active");
	$("#dateType2").toggleClass("active");
	$("#dateType3").removeClass("active");
	if($("#dateType2").hasClass("active")){
		$("#dateType").val('month');
	}else{
		$("#dateType").val('');
	}
})
$("#dateType3").click(function(){
	$("#dateType1").removeClass("active");
	$("#dateType2").removeClass("active");
	$("#dateType3").toggleClass("active");
	if($("#dateType3").hasClass("active")){
		$("#dateType").val('year');
	}else{
		$("#dateType").val('');
	}
})

CSS代码

.active{
   background: #586EFA;
   color: #ffffff!important;
}