原生js写标签切换 桃扇骨 2022-05-12 01:24 135阅读 0赞 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生js标签切换</title> <style type="text/css"> .hide{display: none;} .show{display: block;} .demo{margin: 200px auto;width: 300px;border: 1px solid #ededed;} .selected{background-color: #fff;color: #000;} .faxianCentdata{width: 300px;overflow: hidden;background-color: #000;color: #fff;} .faxianCentdata>div{width: 33.333%;float: left;line-height: 40px;cursor: pointer;text-align: center;} .faxianData>div{width: 300px;height: 100px;text-align: center;line-height: 100px;} </style> </head> <body> <div class="demo"> <div class="faxianCent"> <div class="faxianCentdata"> <div class="selected">热门</div> <div>关注</div> <div>最新</div> </div> </div> <div class="faxianData"> <div class="show">111</div> <div class="hide">222</div> <div class="hide">333</div> </div> </div> <script type="text/javascript"> var aSpan = document.getElementsByClassName('faxianCentdata')[0].getElementsByTagName('div'); var aUl = document.getElementsByClassName('faxianData')[0].getElementsByTagName('div'); for(i=0; i<aSpan.length; i++) { aSpan[i].index = aUl[i].index = i; aSpan[i].onclick = function () { for(i=0; i<aSpan.length; i++) { aSpan[i].className = ''; aUl[i].className = 'hide'; } this.className = 'selected'; aUl[this.index].className = 'show'; } } </script> </body> </html> 因为项目需求,需要用原生js写tab页,突然感觉jquery真的是太好了,js写太费劲了。 Demo示例: [https://brights2017.gitee.io/test1/test1-25/][https_brights2017.gitee.io_test1_test1-25] [https_brights2017.gitee.io_test1_test1-25]: https://brights2017.gitee.io/test1/test1-25/
相关 原生js实现Tab切换(排他)功能 原生js实现Tab切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: ![在这里插入 旧城等待,/ 2023年02月13日 12:27/ 0 赞/ 99 阅读
相关 微信小程序 - 原生Tab 标签页切换(轮子) 效果图 可根据需求来修改样式或封装成组件。 ![在这里插入图片描述][20200806104753176.gif] wxml <!-- tab框 -- 太过爱你忘了你带给我的痛/ 2022年11月24日 12:57/ 0 赞/ 648 阅读
相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果 原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果, 比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 341 阅读
还没有评论,来说两句吧...