当鼠标点击上面相应的选项卡（tab），下面内容跟随变换
1.Tab栏切换有2个大的模块 2.上的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想）修改类名的方式 3.下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面 4.规律：下面的模块显示内容和上面的选项卡一一对应，相匹配 5.核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号 6.但我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } .tab { width: 900px; margin: 100px 100px; } .tab_list { height: 40px; background-color: #f3f0f1; } .tab_list li { float: left; padding: 10px 20px; font-size: 14px; } .tab_list li:hover { cursor: pointer; } .gb { background-color: #d72820; color: #fff; } .item { margin-top: 10px; display: none; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="gb">商品介绍</li> <li>规格预包装</li> <li>售后保障</li> <li>商品评价(50000)</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block">商品介绍模块</div> <div class="item">规格预包装模块</div> <div class="item">售后保障模块</div> <div class="item">商品评价(50000)模块</div> <div class="item">手机社区模块</div> </div> </div> <script> var tab_list = document.querySelector(".tab_list"); var lis = tab_list.querySelectorAll("li"); var items = document.querySelectorAll(".item"); for (var i = 0; i < lis.length; i++) { //给Li设置索引号 lis[i].setAttribute("index", i); lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].className = ""; } this.className = "gb"; var m = this.getAttribute("index"); //获取当前自定义属性值，也就是索引号 //干掉所有人 for (var i = 0; i < items.length; i++) { items[i].style.display = "none"; } items[m].style.display = "block"; }; } </script> </body> </html>1.导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件 2.==核心原理：==当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .nav { float: left; width: 600px; height: 30px; margin: 100px 100px; } .nav ul { display: none; margin: 0; padding: 0; border-left: 1px solid #fecc5b; border-right: 1px solid #fecc5b; } .nav li { float: left; width: 166px; font-size: 20px; background-color: #eee; list-style: none; text-align: center; } .nav ul li { border-bottom: 1px solid #fecc5b; } .nav ul li:hover { background-color: #fecc5b; } a { text-decoration: none; } .nav li:hover { background-color: blue; } .nav a:hover { color: #ffffff; } </style> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="#">私信</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="#">私信</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="#">私信</a> </li> <li> <a href="#">评论</a> </li> <li> <a href="#">@我</a> </li> </ul> </li> </ul> <script> var nav = document.querySelector(".nav"); var lis = nav.children; for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function () { this.children[1].style.display = "block"; }; } for (var i = 0; i < lis.length; i++) { lis[i].onmouseout = function () { this.children[1].style.display = "none"; }; } </script> </body> </html>