利用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;
}