[样式]针对<span>标签选前和选中后的状态改变

最新推荐文章于 2025-10-21 18:06:16 发布

原创最新推荐文章于 2025-10-21 18:06:16 发布 · 8.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xml #js #jquery

JSP 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript实现动态筛选条件的方法。通过简单的HTML结构配合样式和脚本，可以创建交互式的筛选按钮，当点击按钮时，不仅会改变按钮的外观，还能根据选择的状态触发不同的行为。

选中前为"状态",选中后为"★状态"

html代码及js方法如下

<pre name="code" class="html"><span style="white-space:pre">		</span>.sctj{
			border:1px dotted #640000;
			background: #F7F9FC;
			margin-top:5px!important; 
			color:#000;
			padding:5px;
			margin-left:10px;
			white-space: nowrap;
			cursor: pointer;
		}
		
		.sctj:hover{
			border:1px solid #640000;
			background: #FD7F88;
		}

<div class="search_sk" >
<span style="white-space:pre">	</span>筛选条件>>
	<span id="WQS" class="sctj" onclick="cjsxtj('WQS','未签收')" data-start="0">未签收</span>
	<span id="YQS" class="sctj" onclick="cjsxtj('YQS','已签收')" data-start="0">已签收</span>
	<span id="WFK" class="sctj" onclick="cjsxtj('WFK','未反馈')" data-start="0">未反馈</span>
	<span id="YFK" class="sctj" onclick="cjsxtj('YFK','已反馈')" data-start="0">已反馈</span>
</div>

<pre name="code" class="javascript">function cjsxtj(id,text){
	var inputValue = $("#searchInput").val();
	var ids=['WQS','YQS','WFK','YFK'];
	var start=$('#'+id).data().start;
	if(start==1){	//原来是选中状态
		var obj_html=$('#'+id).html();
		var html=new String(obj_html);
		$('#'+id).html(html.substring(1));
		$('#'+id).css('background-color','');
		$('#'+id).data({start:0});
		getRW(userName,XZRWID,inputValue,'');
	}else{//未选中
		for(var i=0;i<ids.length;i++){
			var _id=ids[i];
			var _start=$('#'+_id).data().start;
			if(_start==1){
				var html2=new String($('#'+_id).html());
				$('#'+_id).html(html2.substring(1));
				$('#'+_id).data({start:0});
			}
			$('#'+_id).css('background-color','');
		}
		var obj_html=$('#'+id).html();
		var html=new String(obj_html);
		$('#'+id).html('★'+html);
		$('#'+id).css('background-color','#FD7F88');
		$('#'+id).data({start:1});
		getRW(userName,XZRWID,inputValue,text);
	}
	
}