js之按钮切换
Posted menglong1214
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之按钮切换相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body,ul,li,p{ margin: 0; padding: 0; } #tabs{ width: 300px; margin: 100px auto; } #tabs ul{ height: 30px; width: 100%; line-height: 30px; display: flex; justify-content: space-around; border-bottom: solid 2px black; } li{ height: 28px; width: 80px; line-height: 28px; font-weight: 200; text-align: center; border: solid 1px gray; border-bottom: none; list-style: none; cursor: pointer; } .onclick{ border-top: solid 2px gray; border-bottom: solid 2px white; } #tabs div{ padding: 10px; border: solid 1px gray; border-top: none; } .hidden{ display: none; } #tabs p{ line-height: 2; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> </head> <body> <div id="tabs"> <ul id="menu-list"> <li class="onclick">国际新闻</li> <li>国内新闻</li> <li>世界杯</li> </ul> <div> <p>美征收钢铝关税 墨西哥称将向世贸组织投诉美国</p> <p>英首相特雷莎与特朗普通话:美国加征钢铝关税不合</p> <p>台军方已发现失联战机残骸,台军近20年已坠毁8</p> <p>俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄</p> </div> <div class="hidden"> <p>台风来了!今年第4号台风生成,它给广东带来的影</p> <p>台风白色预警发布!第4号台风24小时内将影响深</p> <p>央视:滴滴顺风车再爆审核漏洞 整改成效几何?</p> <p>台湾水果价格崩跌20年最惨 国民党批蔡当局</p> </div> <div class="hidden"> <p>俄罗斯世界杯前瞻:俄罗斯会成为“史上最弱东道主”吗?</p> <p>特使孙春兰将出席俄罗斯世界杯开幕式</p> <p>卡拉斯科:俄罗斯世界杯全力以赴 维特塞尔:我骄傲</p> <p>球迷必收藏!2018俄罗斯世界杯最终23人大名单:736人汇总!</p> </div> </div> </body> <script type="text/javascript"> var tabs = document.getElementById(‘tabs‘); var menuList = document.getElementById(‘menu-list‘); var listItems = menuList.querySelectorAll(‘li‘); var divs = tabs.querySelectorAll("div"); for (var i = 0;i < listItems.length;i++) { listItems[i].index = i; listItems[i].onclick = function(){ // alert(this.index); for(var j = 0; j < listItems.length; j++) { listItems[j].className = ""; divs[j].className = "hidden"; } this.className = "onclick"; divs[this.index].className = ""; } } </script> </html>
以上是关于js之按钮切换的主要内容,如果未能解决你的问题,请参考以下文章