联动图标，前面的亮起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
li{
float: left;
margin-right: 20px;
}
ul{
width: 1000px;
height:200px;
margin: 50px auto;
}
div span{
display: block;
width: 30px;
height: 2px;
background: black;
float: left;
}
div i{
float: left;
}
p{
margin-top: 25px;
text-align: center;
}
.backIdTitle.active{
color:red;
}
.backIdTitle.active span{
background:red;
}
.backIdTitle.active p{
color:black;
}
.backIdTitle.activeChild p{
color:red;
}
</style>
</head>
<body>
<ul class="tabTips">
<li class="backIdTitle" data-id="5">
<div>
<span></span>
<i>11</i>
<span></span>
</div>
<p>11</p>
</li>
<li class="backIdTitle" data-id="6">
<div>
<span></span>
<i>22</i>
<span></span>
</div>
<p>11</p>
</li>
<li class="backIdTitle" data-id="7">
<div>
<span></span>
<i>33</i>
<span></span>
</div>
<p>11</p>
</li>
<li class="backIdTitle" data-id="8">
<div>
<span></span>
<i>44</i>
<span></span>
</div>
<p>11</p>
</li>
<li class="backIdTitle" data-id="9">
<div>
<span></span>
<i>55</i>
<span></span>
</div>
<p>11</p>
</li>
</ul>
<ul class="tabCont">
<li></li>
</ul>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var realId=97;//${......}
var realNum=5;//${......}
var url="http://192.168.1.172:8080/lianjiaHome/detail/getAcceptanceData.html?id=97&statusNum=5";
function ajaxData(url,callback,methodType){
var type = methodType || "GET";
$.ajax({
url: url,
type:type,
dataType:"json",
success: function(data){
callback(data)
},
error:function(data){
console.log('获取新闻列表失败')
}
});
}
ajaxData("http://192.168.1.172:8080/lianjiaHome/detail/getAcceptanceData.html?id="+realId+"&statusNum="+realNum,getList);
function getList(data){
var res=data.data;
var str='';
var str1='';
for(var i=0;i<res.length;i++){
str+='<li>'+
'<div class="ict" style="">'+
'<p style="margin-left:60px;font-weight:700">施工信息</p>'+
'<div>'+
'<p>施工队名称：<span class="teamname">'+res[i].teamName+'</span></p>'+
'<p>联系方式：<span class="phone">'+res[i].phone+'</span></p>'+
'<p>阶段完工时间：<span class="fnstime">'+res[i].operateTime+'</span></p>'+
'</div>'+
'</div>'+
'</li>'
var imgList=res[i].foremanPic;
for(var j=0;j<imgList.length;j++){
str1+='<li>'+
'<img class="img-a" src="'+imgList[j]+'" alt="" style="height: 250px;width: 400px;">'+
'</li>'
}
str+=str1;
}
$('.tabCont').append(str);
}
function tabs(tabTit,on,tabCon){
$(tabTit).children().click(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
};
tabs(".tabTips","activeChild",".tabCont");
var backId=9;//${.....}
$('.backIdTitle').each(function(){
var id=$(this).attr('data-id');
console.log(id);
if(id==backId){
$(this).prevAll().addClass('active');
$(this).unbind();
$(this).nextAll().unbind();
$(this).prev().trigger("click");
}
})
</script>
</html>
