1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="JS/jquery-3.3.1.min.js"></script> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 .nav { 14 width: 100px; 15 height: 30px; 16 line-height: 30px; 17 text-align: center; 18 font-family: "微软雅黑"; 19 color: #000; 20 float: left; 21 background-color: #F7F7F7; 22 margin: 0 auto; 23 padding: 0; 24 border: 1px solid #ccc; 25 border-right-width: 0px; 26 } 27 28 a { 29 text-decoration: none; 30 } 31 32 a:hover { 33 color: #FF8400; 34 } 35 36 li { 37 background: url(icon.png) no-repeat 0 -881px; 38 padding-left: 12px; 39 height: 20px; 40 line-height: 20px; 41 } 42 43 li a { 44 color: #000; 45 } 46 47 #d { 48 overflow: hidden; 49 margin-bottom: 10px; 50 } 51 </style> 52 <script> 53 function css($) { 54 $(".nav").mouseover(function () { 55 $(this).css("backgroundColor", "#fff"); 56 $(this).css("borderBottom", "none"); 57 $(this).css("borderTop", "3px solid #FF8400"); 58 $(this).css("color", "#FF8400"); 59 }) 60 } 61 function style($) { 62 $(".nav").css("backgroundColor", "#F7F7F7"); 63 $(".nav").css("borderBottom", "1px solid #ccc"); 64 $(".nav").css("borderTop", "1px solid #ccc"); 65 $(".nav").css("color", "#000"); 66 } 67 function lis($) { 68 $("ul > li").mouseover(function () { 69 $(this).css("textDecoration", "underline"); 70 }) 71 $("ul > li").mouseout(function () { 72 $(this).css("textDecoration", "none"); 73 }) 74 } 75 $(function () { 76 $(".nav").mouseover(function () { 77 index = $(this).index(".nav"); 78 style($); 79 lis($); 80 $(".u").eq(index).show(); 81 $(".u").not($(".u").eq(index).show()).hide(); 82 css($); 83 }); 84 }) 85 86 </script> 87 </head> 88 <body> 89 <div id="d"> 90 <div id="div1" class="nav" style="border-top:3px solid #FF8400;border-left:none;border-bottom:none;color:#FF8400;"> 91 <a>新闻</a> 92 </div> 93 <div id="div2" class="nav"> 94 <a>看河南</a> 95 </div> 96 <div id="div3" class="nav"> 97 <a>汽车</a> 98 </div> 99 <div id="div4" class="nav"> 100 <a>体育</a> 101 </div> 102 </div> 103 <ul id="ul1" class="u" style="display:block;"> 104 <li><a href="#">主持中央政治局常务委员会会议</a> </li> 105 <li><a href="#">推动全面</a></li> 106 <li><a href="#">群众议中纪委二次全会讲话</a> </li> 107 <li><a href="#">人民日报署名文章：紧紧抓住</a></li> 108 </ul> 109 <ul id="ul2" class="u" style="display:none;"> 110 <li><a href="#">省委省政府环境保护督察组向安阳市</a> </li> 111 <li><a href="#">年底前郑州农业路高架全线通车</a> </li> 112 <li><a href="#">总带宽全国第二！</a> </li> 113 <li><a href="#">河南963家企业排污许可信息全部公开 </a> </li> 114 </ul> 115 <ul id="ul3" class="u" style="display:none;"> 116 <li><a href="#"> 5座大空间.静态体验宝骏530</a> </li> 117 <li><a href="#"> 试驾广汽传祺GM8:剑指GL8</a> </li> 118 <li><a href="#">手握18万日系紧凑级SUV选谁</a> </li> 119 <li><a href="#">上市新车： 本田飞度 途安L</a> </li> 120 </ul> 121 <ul id="ul4" class="u" style="display:none;"> 122 <li><a href="#">阿德25+11马刺爆冷负副班长</a> </li> 123 <li><a href="#"> 魔兽大两双黄蜂拔掉活塞</a> </li> 124 <li><a href="#">球哥又伤！左膝做核磁共振</a> </li> 125 <li><a href="#"> 湖人或留下场均13+7悍将</a> </li> 126 </ul> 127 </body> 128 </html>