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

<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>

/*新品推荐*/
.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;
}

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

})