一、Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/英雄联盟.css">
<script src="/js/英雄联盟.js"></script>
</head>
<body>
<div class="container">
<ul class="tab_title">
<li class="current">综合</li>
<li>公告</li>
<li>赛事</li>
<li>攻略</li>
<li>社区</li>
</ul>
<div class="tab_content">
<ul class="tab_content_ul" id="tab0">
<li class="first"><a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=16576112706271552872" onclick="PTTSendClick('Notice','Notice-0','月圆中秋，峡谷赠礼活动已上线');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=16576112706271552872','16576112706271552872')">
月圆中秋，峡谷赠礼活动已上线
</a></li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="https://lol.qq.com/gicp/news/410/37051530.html" onclick="PTTSendClick('Notice','Notice-1','14.18版本公告：全球总决赛版本确定，水晶泰坦皮肤闪耀登场');SendEAS.sendNewsPV('index','https://lol.qq.com/gicp/news/410/37051530.html','15360846539752225163')">
14.18版本公告：全球总决赛版本确定，水晶泰坦皮肤闪耀登场
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="https://lol.qq.com/gicp/news/662/37051533.html" onclick="PTTSendClick('Notice','Notice-2','14.18云顶之弈版本更新公告');SendEAS.sendNewsPV('index','https://lol.qq.com/gicp/news/662/37051533.html','12916490153288891851')">
14.18云顶之弈版本更新公告
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=7803647450691111902" onclick="PTTSendClick('Notice','Notice-3','职场精英(2024)皮肤即将上线');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=7803647450691111902','7803647450691111902')">
职场精英(2024)皮肤即将上线
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=1209483402812549005" onclick="PTTSendClick('Notice','Notice-4','“魔法狂欢月”系列道具限时销售及轮换商店更新公告');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=1209483402812549005','1209483402812549005')">
“魔法狂欢月”系列道具限时销售及轮换商店更新公告
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_xinwen">新闻</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=14299805827997752540" onclick="PTTSendClick('Notice','Notice-5','《英雄联盟：云顶之弈》澳门公开赛观赛通行证信息公布');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=14299805827997752540','14299805827997752540')">
《英雄联盟：云顶之弈》澳门公开赛观赛通行证信息公布
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=3862437102624245886" onclick="PTTSendClick('Notice','Notice-6','【英雄联盟】2024全球总决赛 佛耶戈原画');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=3862437102624245886','3862437102624245886')">
【英雄联盟】2024全球总决赛 佛耶戈原画
</a>
<span class="riqi">09-11</span>
</li>
</ul>
<ul class="tab_content_ul" id="tab1">
<li class="first">
<a class="item-href" target="_blank" href="https://lol.qq.com/gicp/news/410/37051530.html" onclick="PTTSendClick('Notice','Notice-0','14.18版本公告：全球总决赛版本确定，水晶泰坦皮肤闪耀登场');SendEAS.sendNewsPV('index','https://lol.qq.com/gicp/news/410/37051530.html','15360846539752225163')">
14.18版本公告：全球总决赛版本确定，水晶泰坦皮肤闪耀登场
</a>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="https://lol.qq.com/act/a20200421weekfree/index.html?siteId=657" onclick="PTTSendClick('Notice','Notice-1','9月13日周免英雄更新公告');SendEAS.sendNewsPV('index','https://lol.qq.com/act/a20200421weekfree/index.html?siteId=657','12115642951595861772')">
9月13日周免英雄更新公告
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=6553053124202693640" onclick="PTTSendClick('Notice','Notice-2','2024年9月12日 不停机更新');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=6553053124202693640','6553053124202693640')">
2024年9月12日 不停机更新
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=16576112706271552872" onclick="PTTSendClick('Notice','Notice-3','月圆中秋，峡谷赠礼活动已上线');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=16576112706271552872','16576112706271552872')">
月圆中秋，峡谷赠礼活动已上线
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="https://lol.qq.com/gicp/news/662/37051533.html" onclick="PTTSendClick('Notice','Notice-4','14.18云顶之弈版本更新公告');SendEAS.sendNewsPV('index','https://lol.qq.com/gicp/news/662/37051533.html','12916490153288891851')">
14.18云顶之弈版本更新公告
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=7803647450691111902" onclick="PTTSendClick('Notice','Notice-5','职场精英(2024)皮肤即将上线');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=7803647450691111902','7803647450691111902')">
职场精英(2024)皮肤即将上线
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type">公告</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=1209483402812549005" onclick="PTTSendClick('Notice','Notice-6','“魔法狂欢月”系列道具限时销售及轮换商店更新公告');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=1209483402812549005','1209483402812549005')">
“魔法狂欢月”系列道具限时销售及轮换商店更新公告
</a>
<span class="riqi">09-11</span>
</li>
</ul>
<ul class="tab_content_ul" id="tab2">
<li class="first">
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=4084424237379333294" onclick="PTTSendClick('Notice','Notice-0','恭喜LCK赛区T1晋级2024全球总决赛');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=4084424237379333294','4084424237379333294')">
恭喜LCK赛区T1晋级2024全球总决赛
</a>
</li>
<li class="tab_content_ul_li">
<span class="item-type_shipin">视频</span>
<a class="item-href" target="_blank" href="//lol.qq.com/v/v2/detail.shtml?docid=2054793430361577760" onclick="PTTSendClick('Notice','Notice-1','2024英雄联盟全球总决赛主题交响乐');SendEAS.sendNewsPV('index','//lol.qq.com/v/v2/detail.shtml?docid=2054793430361577760','2054793430361577760')">
2024英雄联盟全球总决赛主题交响乐
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_saishi">赛事</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=6499718261127099168" onclick="PTTSendClick('Notice','Notice-2','恭喜LCK赛区DK晋级2024全球总决赛');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=6499718261127099168','6499718261127099168')">
恭喜LCK赛区DK晋级2024全球总决赛
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_saishi">赛事</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=17558322753965654180" onclick="PTTSendClick('Notice','Notice-3','TOC9 网鱼赛区杭州赏金大赛等你来战！');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=17558322753965654180','17558322753965654180')">
TOC9 网鱼赛区杭州赏金大赛等你来战！
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_saishi">赛事</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=3640658344822660816" onclick="PTTSendClick('Notice','Notice-4','2024全球总决赛九月揭幕！11月2日迎来冠亚军决赛。');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=3640658344822660816','3640658344822660816')">
2024全球总决赛九月揭幕！11月2日迎来冠亚军决赛。
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_saishi">赛事</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=17367630370390806167" onclick="PTTSendClick('Notice','Notice-5','2024全球总决赛入围赛赛程公布');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=17367630370390806167','17367630370390806167')">
2024全球总决赛入围赛赛程公布
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_saishi">赛事</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=6375290564278759319" onclick="PTTSendClick('Notice','Notice-6','2024全球总决赛观赛指南');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=6375290564278759319','6375290564278759319')">
2024全球总决赛观赛指南
</a>
<span class="riqi">09-11</span>
</li>
</ul>
<ul class="tab_content_ul" id="tab3">
<li class="first">
<a class="item-href" target="_blank" href="//lol.qq.com/v/v2/detail.shtml?docid=1459914316757038362" onclick="PTTSendClick('Notice','Notice-0','14.18T1英雄榜单，丛刃穿甲破败王称霸！赛娜成最强后期');SendEAS.sendNewsPV('index','//lol.qq.com/v/v2/detail.shtml?docid=1459914316757038362','1459914316757038362')">
14.18T1英雄榜单，丛刃穿甲破败王称霸！赛娜成最强后期
</a>
</li>
<li class="tab_content_ul_li">
<span class="item-type_xinwen">新闻</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=4960547113011472903" onclick="PTTSendClick('Notice','Notice-1','「7套锅+新花仙」国服追加巨量热补丁，环境不稳定！');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=4960547113011472903','4960547113011472903')">
「7套锅+新花仙」国服追加巨量热补丁，环境不稳定！
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_shipin">视频</span>
<a class="item-href" target="_blank" href="//lol.qq.com/v/v2/detail.shtml?docid=32707910104549893" onclick="PTTSendClick('Notice','Notice-2','14.18版本研究所，战士打野起飞，法师加强，中路射手退场！');SendEAS.sendNewsPV('index','//lol.qq.com/v/v2/detail.shtml?docid=32707910104549893','32707910104549893')">
14.18版本研究所，战士打野起飞，法师加强，中路射手退场！
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_jiaoxue">教学</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=13157463470332447916" onclick="PTTSendClick('Notice','Notice-3','开局有这个神器稳冲，简单无脑且吃鸡率超高');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=13157463470332447916','13157463470332447916')">
开局有这个神器稳冲，简单无脑且吃鸡率超高
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_xinwen">新闻</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=8712292448800682484" onclick="PTTSendClick('Notice','Notice-4','S-「命运蜜蜂」多王者打磨细节，蜜蜂桩/蜜友/电震玩有实力！');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=8712292448800682484','8712292448800682484')">
S-「命运蜜蜂」多王者打磨细节，蜜蜂桩/蜜友/电震玩有实力！
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_jiaoxue">教学</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=10289007915267963158" onclick="PTTSendClick('Notice','Notice-5','骚套路疯狂炸弹人，绝对冷门，会玩就是吃分王');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=10289007915267963158','10289007915267963158')">
骚套路疯狂炸弹人，绝对冷门，会玩就是吃分王
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_jiaoxue">教学</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=14943226256069821924" onclick="PTTSendClick('Notice','Notice-6','诅咒卡尔玛，有转可冲，能开8诅咒就是神');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=14943226256069821924','14943226256069821924')">
诅咒卡尔玛，有转可冲，能开8诅咒就是神
</a>
<span class="riqi">09-11</span>
</li>
</ul>
<ul class="tab_content_ul" id="tab4">
<li class="first">
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=16696987155339681209" onclick="PTTSendClick('Notice','Notice-0','双城之战官方更新！安贝萨将捍卫家族名声');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=16696987155339681209','16696987155339681209')">
双城之战官方更新！安贝萨将捍卫家族名声
</a>
</li>
<li class="tab_content_ul_li">
<span class="item-type_xinwen">新闻</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=3598645936373077101" onclick="PTTSendClick('Notice','Notice-1','双城之战2定档11月9日！狼人归来姐妹成仇奥术觉醒！');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=3598645936373077101','3598645936373077101')">
双城之战2定档11月9日！狼人归来姐妹成仇奥术觉醒！
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_shipin">视频</span>
<a class="item-href" target="_blank" href="//lol.qq.com/v/v2/detail.shtml?docid=14192777585446374684" onclick="PTTSendClick('Notice','Notice-2','双城之战2范德尔重生之我是沃里克？诶？他怎么死的来着……');SendEAS.sendNewsPV('index','//lol.qq.com/v/v2/detail.shtml?docid=14192777585446374684','14192777585446374684')">
双城之战2范德尔重生之我是沃里克？诶？他怎么死的来着……
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_xinwen">新闻</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=13939508066722070055" onclick="PTTSendClick('Notice','Notice-3','双城之战2将发布定档预告，皮城和祖安之战一触即发');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=13939508066722070055','13939508066722070055')">
双城之战2将发布定档预告，皮城和祖安之战一触即发
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_shipin">视频</span>
<a class="item-href" target="_blank" href="//lol.qq.com/v/v2/detail.shtml?docid=14620543979003324430" onclick="PTTSendClick('Notice','Notice-4','【英雄联盟女帝篇】华丽绽放！踏出那无畏的一步');SendEAS.sendNewsPV('index','//lol.qq.com/v/v2/detail.shtml?docid=14620543979003324430','14620543979003324430')">
【英雄联盟女帝篇】华丽绽放！踏出那无畏的一步
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_xinwen">娱乐</span>
<a class="item-href" target="_blank" href="//lol.qq.com/news/detail.shtml?docid=17706367156325188984" onclick="PTTSendClick('Notice','Notice-5','【英雄联盟】女帝coser美图集');SendEAS.sendNewsPV('index','//lol.qq.com/news/detail.shtml?docid=17706367156325188984','17706367156325188984')">
【英雄联盟】女帝coser美图集
</a>
<span class="riqi">09-11</span>
</li>
<li class="tab_content_ul_li">
<span class="item-type_shipin">视频</span>
<a class="item-href" target="_blank" href="//lol.qq.com/v/v2/detail.shtml?docid=8492479656755942656" onclick="PTTSendClick('Notice','Notice-6','嘻嘻女帝摇');SendEAS.sendNewsPV('index','//lol.qq.com/v/v2/detail.shtml?docid=8492479656755942656','8492479656755942656')">
嘻嘻女帝摇
</a>
<span class="riqi">09-11</span>
</li>
</ul>
<a target="_blank" class="btn-morenews" href="/news/index.shtml" onclick="PTTSendClick('Notice','Notice-more','阅读更多最新资讯')">
<span class="c1">阅读更多</span><span class="c2">最新资讯</span><i class="more-arrow"></i>
</a>
</div>
</div>
</body>
</html>
二、css部分
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.container{
background: #eee;
width: 50%;
height: 100%;
margin: 50px auto;
}
/* .container .tab_title>li.current::after{
display: block;
-webkit-animation: scalein-2.2s;
}
.container .tab_title>li::after{
content: '';
position: absolute;
background-image: url(/img/data_image_png;base….png);
background-position: center center;
box-sizing: border-box;
display: none;
width: 100%;
height: 7px;
left: 0;
bottom: 0;
transition: width .2s, left .2s, margin-left .2s;
} */
.container .tab_title{
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
font-weight: 600;
border-bottom: 1px #e0e2e2 solid;
height: 50px;
}
.container li{
border-top: 1px #e0e2e2 solid;
list-style: none;
font-size: 18px;
line-height: 24px;
margin-right: 74px;
}
.tab_content_ul_li {
display: flex;
justify-content: flex-start;
padding: 5px;
margin: 2px;
}
.tab_content_ul_li>.item-href{
margin-left: 15px;
display: inline-block;
color: #424242;
overflow: hidden;
vertical-align: middle;
font-size: 14px;
letter-spacing: 1px;
}
.riqi{
margin-left: auto;
font-size: 14px;
color: #9d9d9d;
letter-spacing: 1px;
}
.tab_content_ul_li>.item-type{
font-size: 13px;
border: 1px solid #c5ab86;
color: #bb9a6c;
}
.tab_content_ul_li>.item-type_xinwen{
font-size: 13px;
border: 1px #69c5d2 solid;
color: #1da6ba;
}
.tab_content_ul_li>.item-type_shipin{
font-size: 13px;
color: #e9852d;
border: 1px #e9852d solid;
}
.tab_content_ul_li>.item-type_saishi{
font-size: 13px;
color: #6388c5;
border: 1px #97afc5 solid;
}
.tab_content_ul_li>.item-type_jiaoxue{
font-size: 13px;
color: #4ba36a;
border: 1px #4ba36a solid;
}
.tab_content_ul>.first{
line-height: 59px;
padding: 0px 12px;
font-size: 24px;
text-align: center;
color: #0da0b4;
font-weight: 700;
box-sizing: border-box;
width: 600px;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; /* 添加这个属性确保超出部分隐藏 */
word-break: break-all; /* 允许在任何字符处断开单词 */
}
.tab_content_ul>.first>.item-href{
color: #0da0b4;
}
.container .tab_title li:hover{
cursor: pointer;
color:#1da6ba;
font-weight: 700;
padding: 2px;
}
.tab_content_ul>.first>.item-href:hover{
color: #bb9a6c;
}
.tab_content_ul_li>.item-href:hover{
color: #bb9a6c;
}
.btn-morenews{
display: block;
width: 650px;
height: 40px;
background-color: #e3e2e2;
line-height: 40px;
text-align: center;
}
.btn-morenews>.c1 {
font-size: 14px;
color: #676767;
}
.btn-morenews>.c2 {
font-size: 14px;
color: #7ea1a6;
}
三 JS部分
window.onload = function () {
var tab_title_li = document.querySelectorAll(".tab_title li");
var tabContentUls = document.querySelectorAll(".tab_content_ul");
for (var k = 1; k < tabContentUls.length; k++) {
tabContentUls[k].style.display = "none";
}
for (var i = 0; i < tab_title_li.length; i++) {
// 初始化头部 index
tab_title_li[i].setAttribute("index", i);
// 绑事件
tab_title_li[i].onmouseenter = function () {
for (var j = 0; j < tab_title_li.length; j++) {
tab_title_li[j].className = "";
}
this.className = "current";
// 内容变化
var tabContentUls = document.querySelectorAll(".tab_content_ul");
for (var k = 0; k < tabContentUls.length; k++) {
tabContentUls[k].style.display = "none";
}
var selectedTabContentUlId = "tab" + this.getAttribute("index");
console.log("Selected ID: " + selectedTabContentUlId);
var selectedTab = document.getElementById(selectedTabContentUlId);
if (selectedTab) {
selectedTab.style.display = "block";
} else {
console.log("No element with ID: " + selectedTabContentUlId);
}
};
}
};
四 代码分析
1. HTML 结构部分
<head>标签内引入了外部的 CSS 和 JavaScript 文件，为页面提供样式和交互功能。<body>中包含一个div容器，容器内有一个标签列表和一个内容展示区域。
.tab_title是标签列表部分，包含了 “综合”“公告”“赛事”“攻略”“社区” 五个标签。.tab_content是内容展示区域，由五个<ul>列表组成，每个列表对应一个标签的内容，通过不同的id进行区分。
2. JavaScript 部分
window.onload函数在页面加载完成后执行。
- 首先获取页面中的标签列表元素和内容列表元素。
- 然后遍历除第一个内容列表外的其他内容列表，将它们初始化为隐藏状态。
- 接着为每个标签元素设置
index属性，并绑定鼠标移入事件。当鼠标移入某个标签时，先将所有标签的类名清空，然后将当前标签设置为current类，表示选中状态。接着遍历所有内容列表，将它们隐藏，再根据当前标签的index属性获取对应的内容列表id，找到该内容列表并将其显示出来。
3. CSS 部分
*选择器重置了页面元素的内边距和外边距为 0。a选择器去除了链接的下划线。.container定义了页面主要容器的样式，包括背景颜色、宽度、高度和居中显示等。.tab_title设置了标签列表的布局为弹性布局，实现了标签之间的间距和底部边框效果。.container li定义了标签的样式，包括边框、字体大小和行高等。.tab_content_ul_li设置了内容列表项的布局为弹性布局，定义了内边距和外边距。.item-href定义了内容列表项中链接的样式，包括颜色、边距和溢出处理等。.riqi定义了日期部分的样式，包括字体大小、颜色和自动居右显示。- 不同的
.item-type选择器定义了不同类型内容的标签样式，包括边框和颜色。 .tab_content_ul>.first定义了每个内容列表的第一个列表项的样式，包括行高、内边距、字体大小、颜色和文本溢出处理等。.container.tab_title li:hover和.tab_content_ul>.first>.item-href:hover以及.tab_content_ul_li>.item-href:hover定义了鼠标悬停在标签和链接上的样式变化。.btn-morenews定义了 “阅读更多” 按钮的样式，包括宽度、高度、背景颜色和文本对齐方式等。
扫一扫
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
