您的位置:首页 > Web前端 > CSS

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

2015-05-26 14:22 225 查看
选中前为"状态",选中后为"★状态"

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);
}

}



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: