<!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>
转载于:https://www.cnblogs.com/dyjiang/p/8781312.html
相关资源：iSee视频监控 v5.2