?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>
jQuery 实现标签（Tab）页
原文地址：https://www.cnblogs.com/zhang1997/p/8337013.html