<!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>
原文地址：https://www.cnblogs.com/menglong1214/p/9595217.html
时间： 2024-11-02 16:09:31