利用jQuery实现地址左右选择以及选中按钮
实现效果
js以及HTML布局
<!--联盟律师--> | |
<div id="resummen"> | |
<div class="content"> | |
<div class="title"> | |
<img src="/templets/4hlcn/images/index/index-02.png" alt=""> | |
<div> | |
<h1>联盟律师</h1> | |
<h4>(近1000名金牌律师为您解答)</h4> | |
</div> | |
<img src="/templets/4hlcn/images/index/index-01.png" alt=""> | |
</div> | |
<div class="list"> | |
<ul > | |
<li class="li1">郑州</li> | |
<li>洛阳</li> | |
<li>北京</li> | |
<li>上海</li> | |
<li>天津</li> | |
<li>青岛</li> | |
<li>济南</li> | |
<li>无锡</li> | |
<li>武汉</li> | |
<li>广州</li> | |
<li>长沙</li> | |
<li>石家庄</li> | |
<li>成都</li> | |
<li>温州</li> | |
<li>厦门</li> | |
<li>大连</li> | |
<li>襄阳</li> | |
<li>西安</li> | |
<li>山西</li> | |
<li>重庆</li> | |
<li>江苏</li> | |
<li>福州</li> | |
<li>武汉</li> | |
<li>东莞</li> | |
<div class="clear"></div> | |
</ul> | |
</div> | |
</div> | |
<div class="union_lawyer_context"> | |
<div class="content"> | |
<div class="left" id="address_left"> | |
<img src="/templets/4hlcn/images/index/left-01.png" alt=""> | |
</div> | |
<div class="center"> | |
<ul style="left:0" id="address_item"> | |
<li> | |
<div class="address">郑州</div> | |
<div class="address_detail"> | |
<span>西安秦岳律师事务所</span><br> | |
地址:西安市未央区凤城二路 海洋大厦703 <br> | |
邮编:150000 <br> | |
电话:029-55666998 <br> | |
</div> | |
</li> | |
<li> | |
<div class="address">郑州</div> | |
<div class="address_detail"> | |
<span>西安秦岳律师事务所</span><br> | |
地址:西安市未央区凤城二路 海洋大厦703 <br> | |
邮编:150000 <br> | |
电话:029-55666998 <br> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="right" id="address_right"> | |
<img src="/templets/4hlcn/images/index/right-02.png" alt=""> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var address=[ | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"西安",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"郑州",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"洛阳",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"上海",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"天津",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"青岛",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"济南",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"无锡",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"武汉",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"广州",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"长沙",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"石家庄",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"成都",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"温州",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"厦门",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"大连",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"襄阳",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"山西",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"重庆",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"江苏",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"福州",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"武汉",postcodes :"150000",phone:"029-55666998"}, | |
{name:"西安秦岳律师事务所",address:"西安市未央区凤城二路 海洋大厦703",city:"东莞",postcodes :"150000",phone:"029-55666998"}, | |
]; | |
var list_city=""; | |
var list=""; | |
for(var i=0;i<address.length;i++){ | |
list_city+=i==0?`<li class="li1">${address[i].city}</li>`:`<li>${address[i].city}</li>`; | |
list+=`<li> | |
<div class="address_content"> | |
<div class="address">${address[i].city}</div> | |
<div class="address_detail"> | |
<span>${address[i].name}</span><br/> | |
地址:${address[i].address} <br/> | |
邮编:${address[i].postcodes} <br/> | |
电话:${address[i].phone} <br/> | |
</div> | |
</div> | |
</li>`; | |
} | |
list_city+=`<div class="clear"></div>`; | |
$("#resummen .content .list ul").html(list_city); | |
console.log("联盟律师",list); | |
$("#address_item").html(list); | |
var current_address=$("#resummen .content .list ul").children(); | |
$("#resummen .content .list ul li").click(function(){ | |
$("#resummen .content .list ul").find(".li1").removeClass(); | |
$(this).addClass('li1'); | |
for(var i=0;i<current_address.length;i++){ | |
console.log("this is",current_address[i].className,i); | |
if(current_address[i].className=="li1"){ | |
$("#address_item").animate({left:-i*900},200); | |
} | |
} | |
} | |
); | |
$("#address_right").click(function(){ | |
for(var i=0;i<current_address.length;i++){ | |
console.log("this is",current_address[i].className,i); | |
if(current_address[i].className=="li1"&&i<current_address.length-2){ | |
$("#address_item").animate({left:-(i+1)*900},200); | |
$("#resummen .content .list ul").find("li.li1").next().addClass("li1"); | |
$("#resummen .content .list ul").find("li").eq(i).removeClass(); | |
return; | |
} | |
} | |
} | |
); | |
$("#address_left").click(function(){ | |
for(var i=0;i<current_address.length;i++){ | |
console.log("this is",current_address[i].className,i); | |
if(current_address[i].className=="li1"&&i>0){ | |
$("#address_item").animate({left:-(i-1)*900},200); | |
$("#resummen .content .list ul").find("li.li1").prev().addClass("li1"); | |
$("#resummen .content .list ul").find("li").eq(i).removeClass(); | |
return; | |
} | |
} | |
} | |
); | |
</script> |
css样式
/*律师推荐*/
#resummen{width:100%; height:630px; margin-top:66px;}
#resummen .content{ width:1200px; margin:0 auto;}
#resummen .content h5{font-size:36px; color:#fff; font-family:'微软雅黑'; text-align:center; padding-top:42px;}
#resummen .content h5 span{font-size:16px; color:#fff; font-family:'微软雅黑'; text-align:center; font-weight:500; line-height:44px;}
#resummen .content .title{ text-align:center; display: flex; justify-content: space-between;color:#333;}
#resummen .content .title img:first-child{ margin-top:77px; display: inline-block;height: 13px;width:462px;}
#resummen .content .title img:last-child{ margin-top:77px; display: inline-block;height: 13px;width:462px;}
#resummen .content .title div{width:270px; height: 70px;margin-top:45px;}
#resummen .content .title div h4{color:#9a9a9a;}
#resummen .content .list{ margin-top:28px;}
#resummen .content .list ul li{ width:120px; text-align: center; height:45px; float:left; line-height: 45px; }
#resummen .content .list ul .li1{width:120px; text-align: center; height:45px; float:left; line-height: 45px; background: #a30202;color:#fff;border-radius: 5px;}
#resummen .union_lawyer_context{
width:100%;
height: 194px;
background: #f0f0f0;
padding-top:35px;
margin-top:20px;
}
#resummen .union_lawyer_context .content{
width:1200px;
display: flex;
justify-content: space-between;
height: 140px;
font-family:'微软雅黑';
color:#333;
font-size:20px;
}
#resummen .union_lawyer_context .content .left{width:150px;height: 140px;padding-top:56px;}
#resummen .union_lawyer_context .content .img{width:27px;height: 27px;}
#resummen .union_lawyer_context .content .right{width:150px;vertical-align: center;height: 140px;padding-top:56px;}
#resummen .union_lawyer_context .content span{font-weight: 600}
#resummen .union_lawyer_context .content .center{
width:900px;overflow: hidden;position: relative;
}
#resummen .union_lawyer_context .content .center ul{
width:21600px;
display: flex;
height: 140px;
position: absolute;
}
#resummen .union_lawyer_context .content .center ul li{ width:900px;display: flex;justify-content: center;height: 140px;font-family:'微软雅黑'; color:#333;font-size:20px;}
#resummen .union_lawyer_context .content .center ul li .address_content{width:900px;display: flex;justify-content: center;height: 140px;font-family:'微软雅黑'; color:#333;font-size:20px;}
#resummen .union_lawyer_context .content .center ul li .address{ height: 140px;line-height: 140px;font-size:29px;color:#a30202;font-weight: 600;margin-right: 80px;text-align: right;width:30%;
}
#resummen .union_lawyer_context .content .center ul li .address_detail{width:70%;text-align: left;line-height: 35px;
}