通过点击特定的按钮来完成对应的DOM和其的事件（使用:jQuery）

其他 2018-06-14 22:22:46 阅读次数: 3

这个方法实现的代码非常的愚蠢，只是自己另辟道路的想法。

类似不会自动滚动的轮播图，只应为这样，我的方法才可以实现。

这个的目的就是使用下面的分页器上的每个按钮关联上面的div，通过点击实现其的切换。

HTML：

<div class="new">
    <p id="new_text">新品推荐</p>
    <div class="new_img show" index="0">
        <ul>
            <li class="newfood-item newfood-right newfood-li1">
                <a href="meishi-con.html" class="newfood-p1">茶漱海鲜汤</a>
            </li>
            <li class="newfood-item newfood-right newfood-li2">
                <a href="meishi-con.html" class="newfood-p2">玉米海螺沟</a>
            </li>
            <li class="newfood-item newfood-right newfood-li3">
                <a href="meishi-con.html" class="newfood-p3">芝士蛋糕卷</a>
            </li>
            <li class="newfood-item newfood-li4">
                <a href="meishi-con.html" class="newfood-p4">芝士大虾</a>
            </li>
            <li class="newfood-item newfood-right newfood-li5">
                <a href="meishi-con.html" class="newfood-p5">西冷牛排</a>
            </li>
            <li class="newfood-item newfood-right newfood-li6">
                <a href="meishi-con.html" class="newfood-p6">草莓布丁杯</a>
            </li>
            <li class="newfood-item newfood-right newfood-li7">
                <a href="meishi-con.html" class="newfood-p7">黑椒牛排</a>
            </li>
            <li class="newfood-item newfood-li8">
                <a href="meishi-con.html" class="newfood-p8">茶漱海鲜汤</a>
            </li>
        </ul>
    </div>
    <div class="new_img" index="1">
        <ul>
            <li class="newfood-item newfood-right newfood-li5">
                <a href="meishi-con.html" class="newfood-p5">西冷牛排</a>
            </li>
            <li class="newfood-item newfood-right newfood-li6">
                <a href="meishi-con.html" class="newfood-p6">草莓布丁杯</a>
            </li>
            <li class="newfood-item newfood-right newfood-li7">
                <a href="meishi-con.html" class="newfood-p7">黑椒牛排</a>
            </li>
            <li class="newfood-item newfood-li8">
                <a href="meishi-con.html" class="newfood-p8">茶漱海鲜汤</a>
            </li>
            <li class="newfood-item newfood-right newfood-li1">
                <a href="meishi-con.html" class="newfood-p1">茶漱海鲜汤</a>
            </li>
            <li class="newfood-item newfood-right newfood-li2">
                <a href="meishi-con.html" class="newfood-p2">玉米海螺沟</a>
            </li>
            <li class="newfood-item newfood-right newfood-li3">
                <a href="meishi-con.html" class="newfood-p3">芝士蛋糕卷</a>
            </li>
            <li class="newfood-item newfood-li4">
                <a href="meishi-con.html" class="newfood-p4">芝士大虾</a>
            </li>
        </ul>
    </div>
    <div class="new_img" index="2">
        <ul><li class="newfood-item newfood-right newfood-li3">
            <a href="meishi-con.html" class="newfood-p3">芝士蛋糕卷</a>
        </li>
            <li class="newfood-item newfood-li4">
                <a href="meishi-con.html" class="newfood-p4">芝士大虾</a>
            </li>
            <li class="newfood-item newfood-right newfood-li1">
                <a href="meishi-con.html" class="newfood-p1">茶漱海鲜汤</a>
            </li>
            <li class="newfood-item newfood-right newfood-li2">
                <a href="meishi-con.html" class="newfood-p2">玉米海螺沟</a>
            </li>
            <li class="newfood-item newfood-right newfood-li7">
                <a href="meishi-con.html" class="newfood-p7">黑椒牛排</a>
            </li>
            <li class="newfood-item newfood-right newfood-li5">
                <a href="meishi-con.html" class="newfood-p5">西冷牛排</a>
            </li>
            <li class="newfood-item newfood-right newfood-li6">
                <a href="meishi-con.html" class="newfood-p6">草莓布丁杯</a>
            </li>
            <li class="newfood-item newfood-li8">
                <a href="meishi-con.html" class="newfood-p8">茶漱海鲜汤</a>
            </li></ul>
    </div>
    <div class="clearfix" id="newfood-span">
        <span style="background: url(img/icon-2.png);" index="0"></span>
        <span index="1"></span>
        <span index="2"></span>
    </div>
</div>

CSS：

/*新品推荐*/
.new{
    margin-top: 80px;
    border-top:2px solid #533336;

}
#new_text{
    color: white;
    background-color: #533336;
   line-height: 50px;
    font-size: 30px;
    width: 300px;
    text-align: center;
    margin: -25px auto 30px auto;
}
.newfood-item{
    float: left;
    width: 255px;
    height: 255px;
    margin-top: 20px;
}
.newfood-item img{
    width: 100%
}
.newfood-p1,.newfood-p2,.newfood-p3,.newfood-p4,.newfood-p5,.newfood-p6,.newfood-p7,.newfood-p8{
    margin: 0;
    text-align: center;
    width: 255px;
    line-height: 255px;
    font-size: 24px;
    display: none;
}
.new_img{
    display: none;
   padding: 0 220px ;
}
.show{
    display: block;
}
/*分页器*/
#newfood-span{
    margin-top: 18px;
    width: 120px;
    margin: 0 auto;
}
#newfood-span > span{
    display: block;
    width: 35px;
    height: 35px;
    float: left;
    margin: 0 2px;
    background: url(../img/icon.png) no-repeat center 0;
    cursor: pointer;}
/*新品推荐 鼠标经过 效果*/
.newfood-item>a{
    color: #533336;
}
.newfood-li1{
    background: url(../img/food-png1.png) center no-repeat;
    position: relative;
}
.newfood-p1{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li1:hover{
    background: url(../img/food-png1-2.png) center no-repeat;
}
.newfood-li1:hover .newfood-p1{
    display: block;
}
.newfood-li2{
    background: url(../img/food-png2.png) center no-repeat;
    position: relative;
}
.newfood-p2{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li2:hover{
    background: url(../img/food-png2-2.png) center no-repeat;
}
.newfood-li2:hover .newfood-p2{
    display: block;
}
.newfood-li3{
    background: url(../img/food-png3.png) center no-repeat;
    position: relative;
}
.newfood-p3{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li3:hover{
    background: url(../img/food-png3-2.png) center no-repeat;
}
.newfood-li3:hover .newfood-p3{
    display: block;
}
.newfood-li4{
    background: url(../img/food-png4.png) center no-repeat;
    position: relative;
}
.newfood-p4{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li4:hover{
    background: url(../img/food-png4-2.png) center no-repeat;
}
.newfood-li4:hover .newfood-p4{
    display: block;
}
.newfood-li5{
    background: url(../img/food-png5.png) center no-repeat;
    position: relative;
}
.newfood-p5{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li5:hover{
    background: url(../img/food-png5-2.png) center no-repeat;
}
.newfood-li5:hover .newfood-p5{
    display: block;
}
.newfood-li6{
    background: url(../img/food-png6.png) center no-repeat;
    position: relative;
}
.newfood-p6{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li6:hover{
    background: url(../img/food-png6-2.png) center no-repeat;
}
.newfood-li6:hover .newfood-p6{
    display: block;
}
.newfood-li7{
    background: url(../img/food-png7.png) center no-repeat;
    position: relative;
}
.newfood-p7{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li7:hover{
    background: url(../img/food-png7-2.png) center no-repeat;
}
.newfood-li7:hover .newfood-p7{
    display: block;
}
.newfood-li8{
    background: url(../img/food-png8.png) center no-repeat;
    position: relative;
}
.newfood-p8{
    position: absolute;
    top: 0;
    left: 0;
}
.newfood-li8:hover{
    background: url(../img/food-png8-2.png) center no-repeat;
}
.newfood-li8:hover .newfood-p8{
    display: block;
}
.newfood-right{
    margin-right: 18px;
}

JQ：

$(function{
 var $span = $(".new span");
    $span.click(function () {
        $(this).css("background","url(img/icon-2.png)").siblings().css("background","url(img/icon.png)");
       var i=$(this).attr("index");   //获取自定义index的值
       if (i==0){     通过值来判断即可
           $("div[index ='0']").addClass("show").siblings().removeClass("show");
       } else if(i==1){
           $("div[index ='1']").addClass("show").siblings().removeClass("show");
       }else{
           $("div[index ='2']").addClass("show").siblings().removeClass("show");
       }

})

猜你喜欢

转载自www.cnblogs.com/ZwjFronTend/p/9185129.html
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022