替换class这个功能对于点击事件是比较常用的。
举个例子,移动端的菜单按钮就是用到这个功能的,点击按钮后添加个class,然后再加css动态效果,可以做出很好看的特效效果
- 添加:addClass(“class”)
- 删除:removeClass(“class”)
$(document).ready(function(){
$(".class").click(function(){
//这是添加的,给class添加class2
$(".class").addClass(".class2");
//这是删除的,给class删除class2
$(".class").removeClass(".class2");
})
})
如果是换了样式之后,想换回原来的样式,即是切换样式,那么就涉及到一个判断当前样式的问题,此时可以使用方法 hasClass() ,该方法是判断元素当前是否含有某样式。
$(document).ready(function(){
$(".class").click(function(){
//判断class是否有class2
if($("class").hasClass(".class2")){
//有就删除
$(class).removeClass("class2");
}else{
//没有就添加
$(class).addClass("class2");
}
})
})
这样在写css3过渡效果就很好看的了。
别忘了引入jquery文件喔。
希望这编文章对您有帮助
文章评论