楼层区,一二楼结构一样的,所以写jq的时候,获取的对象都是两个楼里,好多问题啊就
<!--楼层区-->
<div class="floor">
<!--一楼-->
<div class="onefloor">
<!--一楼导航-->
<div class="one-nav">
<div class="navleft">
<span>1F</span><span>服装鞋包</span>
</div>
<div class="navright">
<span class="sort arrow-active">大牌</span>
<span >|</span>
<span class="sort">男装</span>
<span >|</span>
<span class="sort">女装<pan>
</div>
</div>
<!--一楼内容-->
<div class="one-box box-active">
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
</div>
<div class="one-box">
<div class="cloth-item">
<a href="#">
<img src="素材/floor/6.jpg">
</a>
<p class="mb">2adidas 阿迪达斯 训练 男子 </p>
<p class="red mb">¥335</p>
</div>
</div>
<div class="one-box">
<div class="cloth-item">
<a href="#">
<img src="素材/floor/4.jpg">
</a>
<p class="mb">3必迈BMAI体织跑步短袖T恤</p>
<p class="red mb">¥159</p>
</div>
</div>
</div>
<!--二楼-->
<div class="onefloor">
<!--二楼导航-->
<div class="one-nav">
<div class="navleft">
<span>2F</span><span>个护美妆</span>
</div>
<div class="navright">
<span class="sort arrow-active">热门</span>
<span >|</span>
<span class="sort">国际大牌</span>
<span >|</span>
<span class="sort">国际名牌<pan>
</div>
</div>
<!--二楼内容-->
<div class="one-box box-active">
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
<div class="cloth-item">
<a href="#">
<img src="素材/floor/5.jpg">
</a>
<p class="mb">1匡威男棒球开衫外套2015</p>
<p class="red mb">¥479</p>
</div>
</div>
<div class="one-box">
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.jpg">
</a>
<p class="mb">2adidas 阿迪达斯 训练 男子 </p>
<p class="red mb">¥335</p>
</div>
</div>
<div class="one-box">
<div class="cloth-item">
<a href="#">
<img src="素材/floor/1.png">
</a>
<p class="mb">3必迈BMAI体织跑步短袖T恤</p>
<p class="red mb">¥159</p>
</div>
</div>
</div>
</div>
/*楼层区*/
.floor{
width:1000px;
height:auto;
margin:0 auto;
}
.onefloor{
width:100%;
height:auto;
}
.one-nav{
width:100%;
height:60px;
line-height:60px;
border-bottom:1px solid red;
box-sizing:border-box;
}
.one-nav .navleft{
float:left;
}
.one-nav .navleft span:first-child{
display:inline-block;
width:24px;
height:24px;
line-height:24px;
border-radius:50%;
background:black;
margin-right:15px;
color:white;
font-size:12px;
text-align:center;
}
.one-nav .navleft span:last-child{
font-size:20px;
font-weight:bold;
}
.one-nav .navright{
height:60px;
float:right;
margin-right:10px;
line-height:60px;
text-align:center;
}
.one-nav .navright span.sort{
display:inline-block;
width:auto;
height:60px;
margin:0 8px;
}
.arrow-active{
background:url(../素材/floor-arrow.png) no-repeat bottom;
}
.one-box{
width:100%;
overflow:hidden;
zoom:1;
margin-bottom:20px;
display:none;
}
.box-active{
display:block;
}
.one-box .cloth-item{
width:166.6px;
height:200px;
float:left;
font-size:12px;
text-align:center;
/*box-shadow:0 0 2px 0 rgba(207,207,207,0.8);*/
}
.one-box .cloth-item img{
margin-top:20px;
}
.mb{margin-top:5px;}
//楼层区
var sort=$('.sort');
var onebox=$('.one-box');
sort.mouseenter(function(){
sort.eq($(this).index()/2).addClass('arrow-active')
.siblings('.sort').removeClass('arrow-active');
onebox.eq($(this).index()/2).addClass('box-active')
.siblings().removeClass('box-active')
})
如题,必须给二楼重新定义结构吗。这样样式也都得重新写的呀。而且脚本也得另写一份么?
正在回答 回答被采纳积分+1
css
.todays {
position: relative;
height: 164px;
background-color: red;
overflow: hidden;
}
.todays .carousel-container {
width: 3600px;
height: 100%;
}
.todays .carousel-item {
float: left;
height: 100%;
}
.todays .carousel-item a {
width: 240px;
overflow: hidden;
}
.floor {
margin-top: 14px;
}
.floor-header {
height: 64px;
line-height: 64px;
border-bottom: 1px solid #f01414;
}
.floor-title {
color: #07111b;
font-size: 22px;
}
.floor-num {
position: relative;
top: -2px;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
background-color: #07111b;
border-radius: 50%;
margin-right: 14px;
color: #fff;
font-size: 12px;
text-align: center;
}
.floor-header .vline {
position: relative;
top: 24px;
background-color: #d9dde1;
}
.floor-item {
float: left;
width: 200px;
height: 232px;
text-align: center;
}
.floor-item:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.floor-item-pic {
margin-top: 24px;
}
.floor-item-name {
margin-top: 24px;
}
.floor-item-name a {
color: #07111b;
}
.floor-item-name a:hover {
color: #f01414;
}
.floor-item-price {
margin-top: 10px;
color: #f01414;
font-size: 14px;
}
.floor .tab-item {
color: #93999f;
}
.floor .tab-item-active {
height: 65px;
background: url(../img/floor-arrow.png) no-repeat center bottom;
color: #f01414;
}
.tab-panel {
display: none;
}
.tab-panel-active {
display: block;
}js:
// 楼层选项卡事件
$(".tab-item").mouseover(function() {
$(this).parent().children("a").removeClass("tab-item-active");
$(this).addClass("tab-item-active");
var index = $(this).parent().children("a").index($(this));
$(this).parents(".floor").children(".floor-body").children("ul").eq(index).addClass("tab-panel-active").siblings().removeClass("tab-panel-active");
})希望可以帮到你!
<!-- 二楼 --> <div class="floor tab container" data-mode="fade"> <div class="floor-header"> <h2 class="floor-title left"><span class="floor-num">2F</span>个护美妆</h2> <div class="right"> <a href="javascript:;" class="tab-item tab-item-active left mr15">热门</a> <i class="vline left mr15"></i> <a href="javascript:;" class="tab-item left mr15">国际大牌</a> <i class="vline left mr15"></i> <a href="javascript:;" class="tab-item left mr15">国际名品</a> </div> </div> <div class="floor-body cf"> <ul class="tab-panel tab-panel-active"> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/5.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">1韩束红石榴鲜活水盈七件套装</a></p> <p class="floor-item-price">¥169</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/5.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">温碧泉八杯水亲亲水润五件套装</a></p> <p class="floor-item-price">¥198</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/5.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">御泥坊红酒透亮矿物蚕丝面膜贴</a></p> <p class="floor-item-price">¥79.9</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/5.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">吉列手动剃须刀锋隐致护</a></p> <p class="floor-item-price">¥228</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/5.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">Mediheal水润保湿面膜</a></p> <p class="floor-item-price">¥119</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/5.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">纳益其尔芦荟舒缓保湿凝胶</a></p> <p class="floor-item-price">¥39</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">宝拉珍选基础护肤旅行四件套</a></p> <p class="floor-item-price">¥299</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">温碧泉透芯润五件套装</a></p> <p class="floor-item-price">¥257</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">玉兰油多效修护三部曲套装</a></p> <p class="floor-item-price">¥199</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">LOREAL火山岩控油清痘洁面膏</a></p> <p class="floor-item-price">¥36</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">百雀羚水嫩倍现盈透精华水</a></p> <p class="floor-item-price">¥139</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">珀莱雅新柔皙莹润三件套</a></p> <p class="floor-item-price">¥99</p> </li> </ul> <ul class="tab-panel tab-hide"> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">2adidas 阿迪达斯 训练 男子</a></p> <p class="floor-item-price">¥335</p> </li> </ul> <ul class="tab-panel tab-hide"> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">3必迈BMAI一体织跑步短袖T恤</a></p> <p class="floor-item-price">¥159</p> </li> </ul> </div> </div>
不需要写两次,这里老师给你写一个参考案例:
<!-- 一楼 --> <div class="floor tab container" data-mode="fade"> <div class="floor-header"> <h2 class="floor-title left"><span class="floor-num">1F</span>服装鞋包</h2> <div class="right"> <a href="javascript:;" class="tab-item tab-item-active left mr15">大牌</a> <i class="vline left mr15"></i> <a href="javascript:;" class="tab-item left mr15">男装</a> <i class="vline left mr15"></i> <a href="javascript:;" class="tab-item left mr15">女装</a> </div> </div> <div class="floor-body cf"> <ul class="tab-panel tab-panel-active"> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">1匡威男棒球开衫外套2015</a></p> <p class="floor-item-price">¥479</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">adidas 阿迪达斯 训练 男子</a></p> <p class="floor-item-price">¥335</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">必迈BMAI一体织跑步短袖T恤</a></p> <p class="floor-item-price">¥159</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">NBA袜子半毛圈运动高邦棉袜</a></p> <p class="floor-item-price">¥65</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">特步官方运动帽男女帽子2016</a></p> <p class="floor-item-price">¥69</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">KELME足球训练防寒防风手套</a></p> <p class="floor-item-price">¥4999</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/2.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">战地吉普三合一冲锋衣</a></p> <p class="floor-item-price">¥289</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/2.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">探路者户外男士徒步鞋</a></p> <p class="floor-item-price">¥369</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">羽绒服2015秋冬新款轻薄男士</a></p> <p class="floor-item-price">¥399</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/1.png" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">溯溪鞋涉水鞋户外鞋</a></p> <p class="floor-item-price">¥689</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/3.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">旅行背包多功能双肩背包</a></p> <p class="floor-item-price">¥269</p> </li> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/3.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">户外旅行双肩背包OS0099</a></p> <p class="floor-item-price">¥99</p> </li> </ul> <ul class="tab-panel tab-hide"> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/6.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">2adidas 阿迪达斯 训练 男子</a></p> <p class="floor-item-price">¥335</p> </li> </ul> <ul class="tab-panel tab-hide"> <li class="floor-item"> <p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/4.jpg" alt="" /></a></p> <p class="floor-item-name"><a href="###" target="_blank">3必迈BMAI一体织跑步短袖T恤</a></p> <p class="floor-item-price">¥159</p> </li> </ul> </div> </div>
相似问题
登录后可查看更多问答,登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星