导航栏切换

---

实现效果

---

 

一、实现

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（）点击事件 双重循环控制点击事件及内容的显示与隐藏