在网页中,有时候我们需要隐藏某个内容如div,那就需要让这个元素隐藏或显示。这样的网页效果,其实通过原生JS即可实现。
原生JS控制元素显示隐藏代码,如下:
var obox = document.getElementById("logo");
var odown = document.getElementById("side-item");
obox.onclick = function(){
if( document.getElementById("side-item").style.display=='none'){
odown.style.display = "block";
document.getElementById("logo").classList.add("no");
}else{
odown.style.display = "none";
document.getElementById("logo").classList.remove("no");
}
}
简要说明一下:logo是点击触发的元素,side-item是需要显示隐藏的元素,no是触发事件后给logo加的样式。
只需要对着说明改ID名称就可以了。
徐伟轩博客-不只关注网站设计开发的自媒体
https://letus.top/archives/64.html(转载时需注明本文出处及文章链接)
如需转载或刊登,请联系我们获得授权。
如何修改iframe里的css样式及跨域问题讲解
2,947 阅读 - 09/14网页HTML如何实现页面自适应,适配手机屏幕
2,841 阅读 - 10/24分享带缩略图的网页链接到微信朋友圈[方法]
2,674 阅读 - 10/23网页里点击A标签没有反应怎么办?
1,808 阅读 - 04/15一行代码将你网站封装成微信小程序?
1,390 阅读 - 05/12关于微信里已停止访问该网页的解决办法
1,317 阅读 - 09/24SablogX博客安装出现反复检验数据库的错误解决方案
867 阅读 - 03/03写博客有个卵用?
747 阅读 - 10/01公司做网站千万不要用微擎!
711 阅读 - 03/25