javascript-利用forEach完成选项卡轮换
classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
html:
<div class="container"> <div class="title"> <ul> <li><a href="#">收藏最多</a></li> <li><a href="#">热门话题</a></li> <li><a href="#">猜你喜欢</a></li> </ul> </div> <div class="content"> <ul> <li><span>1</span><a href="#">致富路上“葱”满希望中国人奋斗坐标</a></li> <li><span>2</span><a href="#">向全世界青年发起四点倡议向全世界青年发起四点倡议</a></li> <li><span>3</span><a href="#">中国这本大尺度的历史杂志，果然有点猛料！</a></li> <li><span>4</span><a href="#">一年之季在于春，春季艾灸的好处原来这么多</a></li> <li><span>5</span><a href="#">事关10亿多人利益！个人养老金来了，年缴费上限1.2万 怎么投？</a></li> <li><span>6</span><a href="#">动辄几千的气垫鞋真的是智商税吗？真相竟然是</a></li> <li><span>7</span><a href="#">张忠谋：制造人才短缺 美国增加本土芯片产量是徒劳无功之举</a></li> <li><span>8</span><a href="#">一线城市新房价格仅广州环比下跌，开发商推盘积极性仍待恢复</a></li> </ul> <ul> <li><span>1</span><a href="#">新版《义务教育课程方案及标准》将实行 劳动课时将从综合实践活</a><i>08/08</i></li> <li><span>2</span><a href="#">落实国家“双减”，多元体能中心落地上海学校</a><i>08/07</i></li> <li><span>3</span><a href="#">教育部规范校外培训执法监管 实现执法全过程留痕和可回溯</a><i>08/06</i></li> <li><span>4</span><a href="#">一个教了10年学的中学地理老师，强烈推荐每个人看看它</a><i>08/05</i></li> <li><span>5</span><a href="#">教育部：注重“幼小衔接”，合理设计小学一至二年级课程</a><i>08/04</i></li> <li><span>6</span><a href="#">教育部启动“大美校园”征集展示活动 4月下旬至10月开展</a><i>08/03</i></li> <li><span>7</span><a href="#">安基金第三批抗疫物资3000余箱干粮、8万只口罩送抵上海</a><i>08/02</i></li> <li><span>8</span><a href="#">没想到玉米生吃这么甜！一口爆浆如冰糖牛奶，鲜甜脆嫩</a><i>08/01</i></li> </ul> <ul> <li><span>1</span><a href="#">口罩这样戴，像在敷“保湿面膜”，冰爽透气</a><i>08/08</i></li> <li><span>2</span><a href="#">那些年信了“毛戈平”的女孩们，后来怎么样了？</a><i>08/07</i></li> <li><span>3</span><a href="#">这支除味喷雾，让多少人都摆脱了在外脱鞋的尴尬</a><i>08/06</i></li> <li><span>4</span><a href="#">刘爽：坚守使命与初心 凤凰力行融媒体发展之路</a><i>08/05</i></li> <li><span>5</span><a href="#">“这个不用给特写了”，总台记者直播时捂住乘务</a><i>08/04</i></li> <li><span>6</span><a href="#">《乡村少年》一个寒门子弟忍受屈辱和伤痛向成功</a><i>08/03</i></li> <li><span>7</span><a href="#">《王牌神医》一个社会底层小人物的意外崛起</a><i>08/02</i></li> <li><span>8</span><a href="#">《神医高手在都市》药方有无疗效还有这些原因</a><i>08/01</i></li> </ul> </div> </div>
css:
<style type="text/css">
*{
box-sizing: border-box;
}
body,
ul,
li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
color: #8a8a8a;
text-decoration: none;
}
a:hover{
color: #333;
}
.hidden{
display: none;
}
.container{
width: 270px;
margin: 20px auto;
}
.title{
margin-bottom: 12px;
}
.title ul{
display: flex;
}
.title li{
flex-basis:33.33%;
background-color: #f2f2f2;
padding: 10px 13px;
font-size: 0.875rem;
text-align: center;
}
.title li.active{
background-color: #fe4800;
}
.title li.active a{
color: #fff;
}
.content li{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 0.875rem;
}
.content span{
background-color: #c8c7c7;
border-radius: 3px;
color: #fff;
font-size: 0.75rem;
padding: 1px 6px;
text-align: center;
margin-right: 5px;
}
.content a{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content li:nth-child(-n+3) span{
background-color: #fe4800;
color: #fff;
}
.content i{
font-style: normal;
font-size: 0.75rem;
color: #d3d3d3;
padding-left: 5px;
}
</style>javascript:
<script>
let oLi = document.querySelectorAll('.title li');
let oUl = document.querySelectorAll('.content ul');
// console.log(oUl)
// 初始化
let num = 0;
let oldLi = null;
// 给当前tab页头部区域添加高亮显示类active
oLi[num].classList.add('active');
oldLi = oLi[num];
// 对.content盒子中的3个ul遍历
oUl.forEach(function(item,index){
if(!(num == index)){
console.log(index);
item.classList.add('hidden');
}
})
oLi.forEach(function(item,index){
item.onmouseover = function(){
oldLi.classList.remove('active');
this.classList.add('active');
oldLi = this;
// 先把所有的ul隐藏
oUl.forEach(function(item){
item.classList.add('hidden');
})
// 再把鼠标经过的当前li对应的ul显示
oUl[index].classList.remove('hidden');
}
})
</script>
