background:#fff
}
button.active{
background:red
}
假设上边的css表示button的俩种状态,正常状态和选中状态
<button type='button' id="btn">按钮</button>这个是按钮
var btn = document.getElementById('btn')btn.onclick=function(){//添加点击事件
if(btn.className.indexOf('active')){ //说明已经是选中状态
btn.className = ''//清空class。
}else{
btn.className = 'active'//否则选中它,给它添加active样式
}
}
//如果用jquery,会很方便实现
$('#btn').click(function(){//给id为btn的元素添加点击事件
$(this).toggleClass('active')//每次点击的时候,将当前的元素切换active样式
//如果有,则去掉,否则添加
})
<script type="text/javascript">$(function(){
$("#button a").click(function(){
var $this = $(this)
if($this.hasClass("active")){
$this.removeClass("active")
}else{
$this.addClass("active")
}
})
})
</script>
这样就可以了