点击元素改变样式，再点击，又变回去，来回变

我们经常做的是点击元素改变样式，只是点击一次，那么如果点击很多次呢，我们需要元素来回变化呢？这时候我们就用class名来改变，判断是否有该class

啥都别说了，上代码

<div class="shbian test">你点我就变</div><!--点击显示，再点击其他地方隐藏-->

.shbian{text-align: center;height: 60px;line-height: 60px;width: 160px;cursor: pointer}/*基本的样式*/
.active{color: white;background: midnightblue;box-shadow: 0 0 10 #000000;border-radius: 6px;border: none;;}/*一个样式*/
.test{border: 1px solid #009688;border-radius: 6px;}/*默认的样式*/

var shb=$('.shbian');shb.on('click',function(){if(shb.hasClass('test')){//如果有‘test’的样式，就去除他的样式，添加‘active’的样式shb.removeClass('test').addClass('active');}else if(shb.hasClass('active')){//如果有‘active’的样式，就祛除他的样式，添加‘test’的样式shb.removeClass('active').addClass('test');}})

　　效果图：原来默认的，

点击改变，

再点击：

转载于:https://www.cnblogs.com/eyed/p/8439301.html

点击元素改变样式，再点击，又变回去，来回变相关推荐

点击选中该元素，改变当前点击元素的样式，其他元素样式不变
js方法 1.给元素添加点击事件并传参. onclick = "clickItem( this )" 2.在事件中获取到该item,给item添加css类 , item.cl ...
JQ点击改变当前元素子元素的样式，点击兄弟元素移除当前元素子元素样式
pt为当前元素,pz-li-on为父元素点击改变的样式名找到当前元素的子元素 tc-li-tt 和 tc-li-det 分别加上样式, 然后点击其他兄弟元素后,移除当前元素子元素样式代码如下: $ ...
小程序点击事件改变样式(普通js鼠标点击事件)
1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...
点击图片放大，再点击缩小的代码段
这段js还挺常用,特此记录. 1 <form> 2 <div> 3 <div class="form-group left"> 4 <la ...
Bootstrap table 点击行改变背景色，点击列选中或者取消选中checkbox，根据某个属性隐藏显示某个字段
//点击选中行,改变选中行的背景颜色 (table).on('click-row.bs.table', function (e, row, element){ $('.success').remo ...
html鼠标点击时的样式,鼠标点击输入框时高亮显示边框颜色【jquery和css实现】...
这里解释如何突出显示表单字段的边框颜色.背景颜色等,如焦点上的HTML输入文本框.输入密码.选择下拉菜单和文本区域,并在失去焦点时使用jquery和css使它们正常. 突出显示焦点上的边框颜色突出显 ...
图库相册图片删除所有的分享按钮，点击打印，再点击所有打印机。再点击添加打印机，再点击默认打印服务，删除WLAN直连界面。
删除分享,下面来能出布尔值修改只是把更多菜单里的分享图标以及具体的单个相片预览界面的分享图标删掉,如果选中相片,上面还是会出现分享 vendor/mediatek/proprietary/packag ...
js点击成全屏，再点击或者ESC退出全屏
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
javascript鼠标点击实现改变CSS样式
javascript通过改变元素class名达到间接改变CSS样式 CSS: /* 字体链接样式 */ td.firstLevelMenuClass a:link {color: #3E8BAC; t ...
unity Button按钮点击时改变按钮图片样式
两种改变按钮图片的方法按钮原来是点击的时候,希望它变成这里也可以变成其他图片,不光是改变颜色一.点击时改变图片(点击其他物体时会改回去) 添加Button后,改变设置我们要把这个红色的改成 ...

点击元素改变样式，再点击，又变回去，来回变

点击元素改变样式，再点击，又变回去，来回变相关推荐

最新文章

热门文章