js怎样实现button点击它会被选中,再次点击取消选中?

JavaScript07

js怎样实现button点击它会被选中,再次点击取消选中?,第1张

button{

   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>

这样就可以了