jQuery天猫商品分类导航菜单
一、HTML模块相关源码
HTML文件：index.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery天猫分类导航菜单</title><link rel="stylesheet" href="style.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="JQ.js"></script></head><body><div class="detailed"><div class="left"><ul><li data-id="1"> <span>手机/运行商/数码 <i>></i></span></li><li data-id="2"> <span>电脑/办公<i>></i></span></li><li data-id="3"> <span>食品/酒类<i>></i></span></li><li data-id="4"> <span>医药保健/计生情趣<i>></i></span></li><li data-id="5"> <span>家具/家具/家装/厨具<i>></i> </span></li><li data-id="6"> <span>大家电 /生活电器<i>></i></span></li><li data-id="7"> <span>厨具 /收纳 /宠物<i>></i></span></li><li data-id="8"> <span>汽车 /配件 /用品<i>></i></span></li><li data-id="9"> <span>生鲜/特产<i>></i></span></li><li data-id="10"> <span>图书/文娱 <i>></i></span></li></ul></div><div class="right"><div class="tab hide" data-id="1"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl><dl><dt><a>手机配件<i> ></i></a> </dt><dd><a>手机壳贴膜</a><a>手机存储卡</a><a>数据线</a><a>充电器</a><a>手机耳机</a><a>创意配件</a><a>手机饰品</a><a>手机电池</a><a>移动电源</a><a>蓝牙耳机</a><a>手机支架</a></dd></dl><dl><dt><a>摄影摄像 <i> ></i></a> </dt><dd><a>数码相机</a><a>微单相机</a><a>单反相机</a><a>拍立得</a><a>摄像机镜头</a><a>户外器材</a><a>面膜</a><a>影棚器材</a><a>冲印服务</a><a>数码相框</a></dd></dl><dl><dt><a>数码配件 <i> ></i></a> </dt><dd><a>存储卡</a><a>三脚架</a><a>云台相机包滤镜闪光灯</a><a>手柄相机清洁</a><a>贴膜机身附件</a><a>镜头附件</a><a>读卡器</a><a>粉饼</a><a>支架电池</a><a>充电器</a></dd></dl><dl><dt><a>智能设备<i> ></i></a> </dt><dd><a>智能手表</a><a>智能手环</a><a>监控摄像</a><a>智能眼镜</a><a>智能家居</a><a>健康监测</a><a>无人机</a><a>智能机器人</a><a>运动跟踪器</a></dd></dl><dl><dt><a>影音娱乐<i> ></i></a> </dt><dd><a>耳机</a><a>耳麦音箱</a><a>智能音箱</a><a>音响</a><a>收音机</a><a>眼部护理</a><a>麦克风MP3/MP4</a><a>专业音频</a><a>音频线</a></dd></dl></div><div class="tab hide" data-id="2"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="3"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="4"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="5"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="6"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="7"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="8"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="9"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div><div class="tab hide" data-id="10"><dl><dt><a>手机通讯<i> ></i></a></dt><dd><a>手机</a><a>游戏手机</a><a>5G手机</a><a>拍照手机</a><a>全面屏手机</a><a>老人机</a><a>对讲机</a><a>以旧换新</a><a>手机维修</a></dd></dl><dl><dt><a>运营商<i> ></i></a> </dt><dd><a>合约机手机卡</a><a>宽带充话费</a><a>流量</a><a>中国电信</a><a>中国移动</a><a>中国联通</a><a>京东通信</a><a>挑靓号</a></dd></dl></div></div></div><div style="text-align:center;" class="kk"><p>更多内容请关注<a href="/weixin_50569789?spm=1011.2124.3001.5343" target="_blank"style="color: rgb(255, 0, 0);">小花007</a></p></div></body></html>
二、CSS模块相关源码
CSS文件：style.css
* {margin: 0;padding: 0;}body{margin: 0;padding: 0;width: 100%;background-color: #002b36;font-size: 16px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}ul li {margin: 0;padding: 0;list-style-type: none;}a {text-decoration: none;}.detailed{position: relative;top: 50px;margin: 0 auto;width: 1000px;height: auto;}.left {width: 200px;height: 450px;background: #ff0239;}.left ul {width: 100%;}.left ul li {height: 50px;line-height: 50px;text-align: left;}.left ul li i{float: right;padding-right: 10px;}.left ul li span {padding-left: 10px;height: 45px;line-height: 45px;display: block;background: #ff0239;color: #fff;}.left ul li span:hover {color: #FF0036;background: #000000;transform: scale(1.1);}.right {position: absolute;top: 0;width: 800px;height: 450px;margin-left: 200px;}.tab {position: relative;overflow: hidden;padding: 10px 0px;width: 100%;height: 474px;background: #FFFFFF; }.tab dl {overflow: hidden;padding: 0px 0px 10px 0px;}.tab dt {width: 100px;float: left;display: block;position: relative;clear: left;}.tab dt a {cursor: pointer;font-size: 14px;color: #000;font-weight: bold;text-align: center;padding-left: 10px;}.tab dt i {position: absolute;top: 2px;width: 4px;right: 12px;font-size: 14px;}.tab dd {position: relative;float: left;display: block;width: 680px;overflow: hidden;padding-right:10px;border-bottom: 1px dashed #E3E3E3;}.tab dd a {float: left;font-size: 12px;color: #808080;padding: 0 10px;margin: 4px 0px 12px 0px;border-left: 1px solid #E3E3E3;text-decoration: none;cursor: pointer;}.tab dd a:hover {color: #FF0036;transform: scale(1.1);}.hide {display: none;}.kk{margin-top:100px ;color: #fff;}
三、jQuery模块相关源码
jQuery文件：JQ.js
$(function () {$('.detailed').on('mouseenter', function () {$(".right").removeClass('hide'); //鼠标经过的时候移除hide，显示tab栏});$('.detailed').on('mouseleave', function () {$(".right").addClass('hide'); //鼠标离开的时候添加hide，隐藏tab栏$(".tab").addClass('hide');});$('.detailed').on('mouseenter', 'li', function (e) {//鼠标经过li的时候var tab_data = $(this).attr('data-id');//attr获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。$(".tab").addClass('hide'); //只让选中的显示，其他的均隐藏//获取鼠标经过获取data-id值$('.tab[data-id="' + tab_data + '"]').removeClass('hide');})})
如果没有jquery.min.js文件，可使用
<script src="/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
