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>
