导航栏切换
实现效果
一、实现
for循环嵌套遍历
按钮样式及盒子的显示与隐藏
二、使用步骤
1.js
代码如下(示例):
//游戏资讯 信息栏显示与隐藏
let game_list = document.getElementById('game')
let game_info = document.getElementById('game_info')
let list = document.getElementById('list')
list.onmouseover = () => {
game_info.style.display = 'block'
}
list.onmouseout = () => {
game_info.style.display = 'none'
}
2.html+css
代码如下(示例):
<div class="content_f1_two clear">
<ul class="top_twoli">
<li class="active">最新热点</li>
<li>新闻中心</li>
</ul>
<a href="#" class="more"> </a>
<ul class="top_moreli">
<li>
<a href="#" class="first">
<span>《命运WYD》服务器双倍延长公告</span>
</a>
</li>
<li>
<a href="#">
<span>《命运WYD》10月2日临时维护…</span>
<span class="date">10-02</span>
</a>
</li>
<li>
<a href="#">
<span>命运WYD:中秋双倍活动公告</span>
<span class="date">09-29</span>
</a>
</li>
<li>
<a href="#">
<span>命运WYD-SP反外挂更新公告</span>
<span class="date">09-23</span>
</a>
</li>
<li>
<a href="#">
<span>《命运WYD》9月23日例行维护…</span>
<span class="date">09-23</span>
</a>
</li>
<li>
<a href="#">
<span>命运WYD:服务器掉线公告</span>
<span class="date">09-19</span>
</a>
</li>
<li>
<a href="#">
<span>命运WYD:精炼异常BUG的情况…</span>
<span class="date">09-17</span>
</a>
</li>
<li>
<a href="#">
<span>《命运WYD》9月16日例行维护…</span>
<span class="date">09-17</span>
</a>
</li>
</ul>
<ul class="top_moreli" style="display: none;">
<a href="#" class="first">
<span>创天互娱复活经典网游《命运WYD》,重燃征程…</span>
</a>
</ul>
</div>
/* 第一排第二个 */
.content_f1_two {
width: 485px;
background: #fff;
margin-left: 10px;
position: relative;
overflow: hidden;
}
.content_f1_two .more{
display: inline-block;
width: 21px;
height: 21px;
background: url(../imgs/in_more.png) no-repeat;
position: absolute;
top: 15px;
right: 30px;
}
.top_twoli{
width: 100%;
/* padding-left: 5px; */
border-bottom: 1px solid #b7b7b7;
}
.top_twoli li{
display: inline-block;
/* float: left; */
height: 50px;
line-height: 50px;
font-size: 16px;
color: #2a2a2a;
width: 72px;
margin: 0 10px;
cursor: pointer;
text-align: center;
}
.active{
border-bottom: 4px solid #a11313;
}
.first{
display: block;
width: 415px;
height: 54px;
text-align: center;
margin: 0 auto;
}
.top_moreli{
padding: 0 30px ;
height: 350px;
}
.top_moreli li{
width: 100%;
}
.top_moreli>li a:hover{
color:#a11313;
}
.top_moreli a{
color: #000;
font-size: 14px;
line-height: 30px;
display: inline-block;
width: 100%;
}
.top_moreli>span{
float: left;
}
.top_moreli .date{
float:right ;
}
.first span{
line-height: 50px;
color: #000;
font-size: 18px;
font-weight: 700;
}
总结
onclick()点击事件 双重循环控制点击事件及内容的显示与隐藏