<!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之按钮切换
原文地址：https://www.cnblogs.com/menglong1214/p/9595217.html