作业问题 楼层选项卡切换
<div class="floor-wrap">
<div class="floors">
<div class="floor floor-first cf">
<div class="floor-head">
<h2 class="floor-storey fl"><a href="javascript:;">1F</a>米面粮油</h2>
<div class="floor-title fr">
<a href="javascript:;" target="_blank" class="tab link">综合</a>
<span class="break"></span>
<a href="javascript:;" target="_blank" class="tab link">干果</a>
<span class="break"></span>
<a href="javascript:;" target="_blank" class="tab link">米面粮油</a>
</div>
</div>
<div class="floor-body">
<ul class="floor-container cf">
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/1.jpg" /> </a>
<p class="floor-name">剑南春 水晶剑 52度 整箱装白酒500ml*6瓶 口感浓香型</p>
<p class="floor-price">￥479</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/2.jpg" /> </a>
<p class="floor-name">金纺 衣物护理剂 怡神薰衣草2.5L+2.5L（柔顺剂）（与洗衣剂搭配使用）</p>
<p class="floor-price">￥335</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/3.jpg" /></a>
<p class="floor-name">百草味味 坚果零食干果 每日坚果 奶油味夏威夷果200g/袋（内含开果器）</p>
<p class="floor-price">￥159</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/4.jpg" /></a>
<p class="floor-name">优选100 有机速冻鲜食黄糯玉米6支 240g/支 年货礼盒</p>
<p class="floor-price">￥65</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/5.jpg" /></a>
<p class="floor-name">三只松鼠每日坚果年货礼盒零食坚果年货大礼包孕妇零食小吃榛子巴旦木仁开心果混合果仁30袋装750g/盒</p>
<p class="floor-price">￥499</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/6.jpg" /></a>
<p class="floor-name">农夫山泉 17.5°橙 3kg装 铂金果年货礼盒 新鲜水果</p>
<p class="floor-price">￥289</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/7.jpg" /></a>
<p class="floor-name">八马茶业 茶叶 云南普洱茶熟茶茶饼 自饮建议装375g</p>
<p class="floor-price">￥369</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/8.jpg" /></a>
<p class="floor-name">胡姬花 食用油 压榨 特香型花生油6.18L(定制装)</p>
<p class="floor-price">￥399</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/9.jpg" /></a>
<p class="floor-name">澳洲进口 德运（Devondale)脱脂成人奶粉 原装进口奶粉 1kg/袋</p>
<p class="floor-price">￥689</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/10.jpg" /></a>
<p class="floor-name">福临门 泰玉香 一品茉莉香米 进口原粮 大米 中粮出品 5kg</p>
<p class="floor-price">￥269</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/11.jpg" /></a>
<p class="floor-name">【送4只】 阳澄福记 大闸蟹全母蟹2.6-2.3两/只 6只装生鲜鲜活现货 活蟹螃蟹</p>
<p class="floor-price">￥99</p>
</li>
</ul>
<ul class="floor-container cf">
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/2/1.jpg" /></a>
<p class="floor-name">百草味味 坚果零食干果 每日坚果 奶油味夏威夷果200g/袋（内含开果器）</p>
<p class="floor-price">￥159</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/2/2.jpg" /></a>
<p class="floor-name">三只松鼠每日坚果年货礼盒零食坚果年货大礼包孕妇零食小吃榛子巴旦木仁开心果混合果仁30袋装750g/盒</p>
<p class="floor-price">￥499</p>
</li>
</ul>
<ul class="floor-container cf">
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/3/1.jpg" /></a>
<p class="floor-name">胡姬花 食用油 压榨 特香型花生油6.18L(定制装)</p>
<p class="floor-price">￥399</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/3/2.jpg" /></a>
<p class="floor-name">福临门 泰玉香 一品茉莉香米 进口原粮 大米 中粮出品 5kg</p>
<p class="floor-price">￥269</p>
</li>
</ul>
</div>
</div>
<div class="floor floor-second cf">
<div class="floor-head">
<h2 class="floor-storey fl"><a href="javascript:;">1F</a>米面粮油</h2>
<div class="floor-title fr">
<a href="javascript:;" target="_blank" class="tab link">综合</a>
<span class="break"></span>
<a href="javascript:;" target="_blank" class="tab link">干果</a>
<span class="break"></span>
<a href="javascript:;" target="_blank" class="tab link">米面粮油</a>
</div>
</div>
<div class="floor-body">
<ul class="floor-container cf">
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/1.jpg" /> </a>
<p class="floor-name">剑南春 水晶剑 52度 整箱装白酒500ml*6瓶 口感浓香型</p>
<p class="floor-price">￥479</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/2.jpg" /> </a>
<p class="floor-name">金纺 衣物护理剂 怡神薰衣草2.5L+2.5L（柔顺剂）（与洗衣剂搭配使用）</p>
<p class="floor-price">￥335</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/3.jpg" /></a>
<p class="floor-name">百草味味 坚果零食干果 每日坚果 奶油味夏威夷果200g/袋（内含开果器）</p>
<p class="floor-price">￥159</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/4.jpg" /></a>
<p class="floor-name">优选100 有机速冻鲜食黄糯玉米6支 240g/支 年货礼盒</p>
<p class="floor-price">￥65</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/5.jpg" /></a>
<p class="floor-name">三只松鼠每日坚果年货礼盒零食坚果年货大礼包孕妇零食小吃榛子巴旦木仁开心果混合果仁30袋装750g/盒</p>
<p class="floor-price">￥499</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/6.jpg" /></a>
<p class="floor-name">农夫山泉 17.5°橙 3kg装 铂金果年货礼盒 新鲜水果</p>
<p class="floor-price">￥289</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/7.jpg" /></a>
<p class="floor-name">八马茶业 茶叶 云南普洱茶熟茶茶饼 自饮建议装375g</p>
<p class="floor-price">￥369</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/8.jpg" /></a>
<p class="floor-name">胡姬花 食用油 压榨 特香型花生油6.18L(定制装)</p>
<p class="floor-price">￥399</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/9.jpg" /></a>
<p class="floor-name">澳洲进口 德运（Devondale)脱脂成人奶粉 原装进口奶粉 1kg/袋</p>
<p class="floor-price">￥689</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/10.jpg" /></a>
<p class="floor-name">福临门 泰玉香 一品茉莉香米 进口原粮 大米 中粮出品 5kg</p>
<p class="floor-price">￥269</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/1/11.jpg" /></a>
<p class="floor-name">【送4只】 阳澄福记 大闸蟹全母蟹2.6-2.3两/只 6只装生鲜鲜活现货 活蟹螃蟹</p>
<p class="floor-price">￥99</p>
</li>
</ul>
<ul class="floor-container cf">
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/2/1.jpg" /></a>
<p class="floor-name">百草味味 坚果零食干果 每日坚果 奶油味夏威夷果200g/袋（内含开果器）</p>
<p class="floor-price">￥159</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/2/2.jpg" /></a>
<p class="floor-name">三只松鼠每日坚果年货礼盒零食坚果年货大礼包孕妇零食小吃榛子巴旦木仁开心果混合果仁30袋装750g/盒</p>
<p class="floor-price">￥499</p>
</li>
</ul>
<ul class="floor-container cf">
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/3/1.jpg" /></a>
<p class="floor-name">胡姬花 食用油 压榨 特香型花生油6.18L(定制装)</p>
<p class="floor-price">￥399</p>
</li>
<li class="floor-item fl">
<a href="javascript:;" class="floor-pic"><img src="img/floor/1/3/2.jpg" /></a>
<p class="floor-name">福临门 泰玉香 一品茉莉香米 进口原粮 大米 中粮出品 5kg</p>
<p class="floor-price">￥269</p>
</li>
</ul>
</div>
</div>
</div>
/*楼层区*/
.floor-wrap{
width:100%;
margin-top:30px;
}
.floors{
width:1200px;
margin:0 auto;
}
.floors .floor{
width:100%;
}
.floor .floor-head{
width:100%;
height:24px;
padding-bottom:21px;
font:14px "微软雅黑";
border-bottom:1px solid red;
}
.floor .floor-head h2{
font-size:18px;
font-weight:bolder;
}
.floor .floor-head h2 a{
display:inline-block;
width:24px;
height:24px;
line-height:24px;
text-align:center;
border-radius:50%;
background:#07111b;
color:white;
font-size:14px;
font-weight:bolder;
margin-right:12px;
margin-top:-3px;
}
/*.floor .floor-title li{
float:left;
}*/
.floor .floor-title .tab{
display:inline-block;
text-align:center;
width:60px;
height:38px;
padding-top:8px;
color:#93999f;
position:relative;
z-index:6;
}
.floor .floor-title .break{
display:inline-block;
width:1px;
height:16px;
background:#93999f;
margin:8px 10px 0 10px;
}
.tab-active {
background: url('../img/floor-arrow.png') center bottom no-repeat;
}
.floor .floor-body,.floor-container{
width:1200px;
height:520px;
font:18px "微软雅黑";
margin-bottom:72px;
}
.floor .floor-item{
width:172px;
height:260px;
margin:0 28px 12px 0;
}
.floor .floor-pic{
display:block;
margin-top:20px;
text-align:center;
vertical-align:middle;
}
.floor .floor-pic img{
width:140px;
height:112px;
}
.floor .floor-item .floor-name{
margin-top:20px;
line-height:20px;
font-size:12px;
}
.floor .floor-price{
margin-top:12px;
font-weight:bold;
color:red;
text-align:center;
}
.floor-body ul:first-of-type{
/*display:none;*/
}
.floor-body ul:nth-of-type(2){
display:none;
}
.floor-body ul:last-of-type{
display:none;
}
//楼层分类选项切换
$(".floor-title .tab").hover(function () {
var i = 1;
if ($(this).index() == 4) { i = 2 };
if ($(this).index() == 0) { i = 0 };
$(this).addClass("tab-active");
$(".floor-body .floor-container").eq($(this).index() - i).show().siblings().hide();
}, function () {
$(this).removeClass("tab-active");
})
老师楼层中分类选项卡 $(".floor-title .tab")获取是虽然获取到了3个，但是当实际点击的时候索引是5个 使用调试发现是因为.floor-title里面有5个子元素的原因，只能使用if判断方式来获取，方式写死了，如何准确获取到.tab
作业中两个楼层我直接copy一楼层 实验 发现 二楼的tab选项卡的背景hover有发生变化（多出箭头），但是floor-body发生变化的一楼的内容 而非二楼中的（二楼floor-body毫无变化），老师只能重新再写一遍jquery代码吗 不能用同一个 ？是什么原因
正在回答 回答被采纳积分+1
同学你好，代码是比较灵活的，所以没有源码的。关于您的项目作业有两种解决方案：
第一种：同学可以按照效果图、和在本章学到的知识先完成作业。完成作业之后，自己检查作业。因为视频是可以无限期观看的，此项目作业用到的知识在前面的课程中都有过讲解，如果遇到不熟悉的知识，可以再去看视频，同学可以写完作业之后，自己对照作业区的效果图检查，这样也可以锻炼自己独立解决问题的能力。
第二种方案：如果服务期到期了，可以续费。完成项目作业之后还可以上传，老师帮助批改。另外续费之后，如果在复习或者完成这个项目的过程中遇到问题，还可以在问答区提问，这样可以使同学对知识的掌握更牢固。从这方面考虑是值得的。
另，建议同学合理安排学习时间。只要是在服务到期之前提交作业，老师都会进行批改的~
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
老师是完整的代码啊 问题就是楼层的问题 把单独关于楼层区域的黏贴过来 分别是html代码 css jquery 其他区域的代码跟这个不关联~ 老师难道没仔细看代码吗.....................
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星