楼层区,一二楼结构一样的,所以写jq的时候,获取的对象都是两个楼里,好多问题啊就

楼层区,一二楼结构一样的,所以写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

登陆购买课程后可参与讨论,去登陆

3回答
樱桃小胖子 2019-07-16 18:54:35

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");
})

希望可以帮到你!

  • 提问者 浮沉幻听 #1
    $(this).parent().children("a")不就是指的$(".tab-item")么,对不?
    2019-07-17 10:12:43
  • 樱桃小胖子 回复 提问者 浮沉幻听 #2
    同学的理解是对的
    2019-07-17 10:22:37
  • 提问者 浮沉幻听 #3
    $(this).parents(".floor").children(".floor-body").children("ul") 取ul为什么要这样取呢,没看懂,是为了区分开两楼么,找到当前操作楼里的其他对象?
    2019-07-17 10:22:45
樱桃小胖子 2019-07-16 18:53:18
            <!-- 二楼 -->
            <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>


樱桃小胖子 2019-07-16 18:52:35

不需要写两次,这里老师给你写一个参考案例:

            <!-- 一楼 -->
            <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>
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师