原生js写标签切换 桃扇骨 2022-05-12 01:24 147阅读 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栏的切换 最终实现效果图展示,通过点击tab栏,对内容进行切换。样式未进行美化。 ![70d78ee2147e4b6882303d762b1b6722.png][] 具体思路见代码注 素颜马尾好姑娘i/ 2023年10月10日 22:58/ 0 赞/ 6 阅读
相关 vue 可以写原生js getelementbyid vue 可以写原生js getelementbyid vue 可以写原生js getelementbyid ![在这里插入图片描述][watermark_type_Z 墨蓝/ 2023年07月05日 13:26/ 0 赞/ 3 阅读
相关 JS原生隐士标签扩展 最近项目开发中,开发了不少的接口,有一个接口是这样子的。先从A公司拿到数据后,存放到我们公司数据库里,然后需要将数据展示给客户,下面这个界面,后台要实时刷新,后台写了个定时 超、凢脫俗/ 2023年06月02日 10:55/ 0 赞/ 9 阅读
还没有评论,来说两句吧...