jq实现多开关效果互不影响

有时候我们会用jq写一些特效，jq在控制DOM方面是非常方便的，虽然jq在最近几年没什么进展。

下面就是一个实例图：

我们可以用jq这样实现：

 //html<div id="dd0" alt="0" onclick="changeok('0')"><img src="data:images/j.png" alt="" class="j1" /><img src="data:images/d.png" alt="" class="true1" /></div>//jsfunction changeok(a){var yuans=$('#dd'+a);var isok=yuans.attr('alt');if(isok==0){yuans.attr('alt','1').children(".j1").hide();yuans.children(".true1").show()}else{yuans.attr('alt','0').children(".true1").hide();yuans.children(".j1").show();}}

这里是利用了给每个元素加一个id，这样他们就是独立的一个个体。然后就是利用默认属性alt等于零。让它默认显示没被选中。

如果写一个如上的自定义radio按钮怎么办？

也可以用这样的方法：

        <ul class="user ovf"><li><img src="data:images/m.png" alt=""><div id="dd0" alt="0" onclick="changeok('0')" class="slii"><img src="data:images/k.png" alt="" class="k"><img src="data:images/t.png" alt="" class="t"><p>男宝宝</p></div></li><li><img src="data:images/g.png" alt=""><div id="dd1" alt="0" onclick="changeok('1')" class="slii"><img src="data:images/k.png" alt="" class="k"><img src="data:images/t.png" alt="" class="t"><p>女宝宝</p></div></li></ul>

function changeok(a){var yuans=$('#dd'+a);var isok=yuans.attr('alt');yuans.parent().siblings().children(".slii").attr('alt','0');if(isok==0){yuans.attr('alt','1').children(".k").hide();yuans.parent().siblings().children(".slii").children(".t").hide();yuans.parent().siblings().children(".slii").children(".k").show();yuans.children(".t").show()}else{yuans.attr('alt','0').children(".t").hide();yuans.parent().siblings().children(".slii").children(".k").hide();yuans.parent().siblings().children(".slii").children(".t").show();yuans.children(".k").show();
}
}

加上几行代码就改成点击一个，另一个会消除这种样式。类似radio按钮。

如果有什么疑问？可以加下我的qq:815682884 备注上你的问题为你解忧。

jq实现多开关效果互不影响相关推荐

jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)
jq样式操作和效果 1.样式 1.jq设置样式 $("div").css('属性','值'); 2.jq排他思想 //多选一.排他思想,当前元素设置样式,其与兄弟清除样式 $(th ...
html switch开关实现隐藏,css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现. .switch{ d ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...
图像Resize方式对深度学习模型效果的影响
在基于卷积神经网络的应用过程中,图像Resize是必不可少的一个步骤.通常原始图像尺寸比较大,比如常见监控摄像机出来的是1080P高清或者720P准高清画面,而网络模型输入一般没有这么大,像Yolo系 ...
excel部分网格线不见了_画线的工具和使用法，变换网格线的式样，画线对作品效果的影响...
黄简讲书法:四级课程(格式篇)27--画线一画线的工具前两堂说了,写书法作品时经常用线来定位.线有两种:一是临时的,折线就是这一种,另一种是永久的,那是用颜色画在纸面上的线,是我们想把它保留在作 ...
ipad可以分屏吗_oppo手机的分屏功能你使用过吗？可以同时打开两款软件互不影响！...
今天给大家分享OPPO手机的几个小技巧我们平常使用OPPO手机的时候想要去清理后台应用主要是因为手机出现卡顿我们可能后台开启的应用程序太多导致的那么我们一清理的话会把所有的应用程序都清理掉 ...
几句话明白：神经网络中的基本概念batch，epoch，iterations及对训练效果的影响
###神经网络中的基本概念batch,epoch,iterations及对训练效果的影响自己一直很迷糊,这几个关键词也是傻傻分不清楚,为了彻底搞明白,所以用文字记录: batch:批,一次网络训练读 ...

jq实现多开关效果互不影响

jq实现多开关效果互不影响相关推荐

最新文章

热门文章