jQuery商品分类导航菜单切换

来源：互联网 2023-03-16 23:54:59 版权归原作者所有，如有侵权，请联系我们

jQuery商品分类导航菜单切换

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery商品分类导航菜单切换

1本页面未经授权抓取自百度经验

书写hmtl代码。

div class="containor">

div class="nav_left">

ul>

li data-id="1"> span>美妆/个人护理/span>/li>

li data-id="2"> span>手机 /数码 /电脑办公/span>/li>

li data-id="3"> span>零食 /茶酒 /进口食品 /span>/li>

li data-id="4"> span>母婴玩具 /span>/li>

li data-id="5"> span>腕表 /眼镜 /珠宝饰品 /span>/li>

li data-id="6"> span>大家电 /生活电器 /span>/li>

li data-id="7"> span>厨具 /收纳 /宠物 /span>/li>

li data-id="8"> span>汽车 /配件 /用品 /span>/li>

li data-id="9"> span>生鲜水果 /span>/li>

li data-id="10"> span>家纺 /家饰 /鲜花 /span>/li>

/ul>

/div>

div class="nav_right">

div class="sub hide" data-id="1">

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> 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>BB霜/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>T区护理控油/a> /dd>

/dl>

dl>

dt>a >护肤品 i> >/i>/a> /dt>

/dl>

dl>

dt>a >彩妆 i> >/i>/a> /dt>

dd> a>时尚彩妆/a> a>香水/a> a>气垫护肤/a> a>BB霜/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>T区护理控油/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>T区护理控油/a> /dd>

/dl>

/div>

div class="sub hide" data-id="2">

dl>

dt>a >电脑办公 i> >/i>/a> /dt>

/dl>

/div>

div class="sub hide" data-id="3">

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> a>进口咖啡/a> a>进口葡萄酒/a> a>啤酒饮料/a> /dd>

/dl>

/div>

div class="sub hide" data-id="4">

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>

/div>

div class="sub hide" data-id="5">

dl>

dt>a >珠宝饰品 i> >/i>/a> /dt>

/dl>

/div>

div class="sub hide" data-id="6">

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> a>面膜/a> a>护肤套装/a> a>乳液面霜/a> a>精华液/a> /dd>

/dl>

/div>

div class="sub hide" data-id="7">

dl>

dt>a >厨具 i> >/i>/a> /dt>

dd> a>厨具/a> a>厨具/a> a>油烟机/a> a>洗碗机/a> a>电磁炉/a> a>微波炉/a> /dd>

/dl>

/div>

div class="sub hide" data-id="8">

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>

/div>

div class="sub hide" data-id="9">

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> a>橘子/a> a>香蕉/a> a>猕猴桃/a> a>椰子/a> /dd>

/dl>

/div>

div class="sub hide" data-id="10">

dl>

dt>a >当季热卖 i> >/i>/a> /dt>

dd> a>定制窗帘/a> a>抱枕/a> a>被子/a> a>两用坐垫/a> a>国际家纺床品/a> a>国际居家布艺/a> a>国际家居饰品/a> /dd>

/dl>

/div>

jQuery商品分类导航菜单切换

书写css代码。

* { margin: 0; padding: 0; border: none; }

body, html { margin: 0; padding: 0; width: 100%; /*background: #f4f4f4;*/

background: #e3e3e3; font: 16px Microsoft YaHei, arial, sans-serif; }

ul { margin: 0; padding: 0; list-style-type: none; }

a { text-decoration: none; }

.containor { width: 1000px; height: auto; position: relative; margin: 0 auto; top: 50px; }

.nav_left { width: 200px; height: 500px; background: #FF0036; }

.nav_left ul { width: 100%; height: auto; }

.nav_left ul li { height: 50px; line-height: 50px; text-align: left; }

.nav_left ul li span { padding-left: 10px; height: 50px; line-height: 50px; display: block; background: #FF0036; color: #fff; }

.nav_left ul li span:hover { color: #FF0036; background: #FFFFFF; }

.nav_right { width: 800px; height: 500px; position: absolute; margin-left: 200px; top: 0px; }

.sub { position: relative; overflow: hidden; width: 100%; height: 480px; background: #FFFFFF; padding: 10px 0px; }

.sub dl { overflow: hidden; padding: 0px 0px 10px 0px; }

.sub dt { width: 100px; float: left; display: block; position: relative; clear: left; }

.sub dt a { font-size: 14px; color: #000; font-weight: bold; text-align: center; padding-left: 20px; text-decoration: none; cursor: pointer; }

.sub dt i { width: 4px; right: 12px; top: 2px; font-size: 14px; position: absolute; font-style: normal; }

.sub dd { width: 680px; float: left; display: block; position: relative; overflow: hidden; padding-right: 20px; border-bottom: 1px dashed #E3E3E3; }

.sub dd a { font-size: 12px; float: left; color: #666; padding: 0 10px; margin: 4px 0px 10px 0px; text-decoration: none; cursor: pointer; border-left: 1px solid #E3E3E3; }

.sub dd a:hover { color: #FF0036; }

.hide { display: none; }

.show { display: block; }

jQuery商品分类导航菜单切换