<!DOCTYPE html> <html> <head> <title>牙齿矫正</title> <meta charset="utf-8"/> <style type="text/css"> .cq_jz_effect{ 1200px;margin: 0 auto;position: relative;overflow: hidden;} .cq_jz_effect_left{float: left;} .cq_jz_effect_left li:first-child{display: block;} .cq_jz_effect_left li{ 700px;padding:30px;border:1px solid #ccc;text-align: center;display: none;height: 434px;} .cq_jz_effect_right{ 300px;float: left;} .cq_jz_effect_right li:first-child{margin-top:0px;background: #26bd83;color: #fff;} .cq_jz_effect_right li{ 300px;background: #e5e5e5;margin-top:2px;font-size: 24px;text-align: center;height: 122.5px;overflow: hidden;color: #535353;cursor:pointer} .cq_jz_effect_left2 li{border:0; 700px;padding: 0;} .cq_jz_effect_left2 li img{ 100%;} .cq_jz_effect_right2 li{height: 93.2px;color: #535353;cursor:pointer} </style> </head> <body> <h1 class="whati whati_paddig"><p style="font-size:35px;color:#00c78f">INVISALIGN隐适美 无可比拟的临床优势</p></h1><br/><br/> <div class="cq_jz_effect cleafix"> <ul class="cq_jz_effect_left"> <li id="tabObj_Content0"><img src="img/ca_jz_13.jpg" alt="1"></li> <li id="tabObj_Content1"><img src="img/ca_jz_14.jpg" alt="2"></li> <li id="tabObj_Content2"><img src="img/ca_jz_15.jpg" alt="3"></li> <li id="tabObj_Content3"><img src="img/ca_jz_16.jpg" alt="4"></li> </ul> <ul class="cq_jz_effect_right" id="tabObj"> <li onmouseover="nTabs(this,0);"><br/><p>术前预知矫正效果</p></li> <li onmouseover="nTabs(this,1);"><br/><p>矫正器定制后<br/>交由北美生产</p></li> <li onmouseover="nTabs(this,2);"><br/><p>精准的牙齿位移控制</p></li> <li onmouseover="nTabs(this,3);"><br/><p>全球已有超过<br/>200万使用者</p></li> </ul> </div><br/> <div class="cq_jz_effect cleafix"> <ul class="cq_jz_effect_left cq_jz_effect_left2"> <li id="myTab1_Content0"><img src="img/ca_jz_17.jpg" alt="0"></li> <li id="myTab1_Content1"><img src="img/ca_jz_18.jpg" alt="1"></li> <li id="myTab1_Content2"><img src="img/ca_jz_19.jpg" alt="2"></li> <li id="myTab1_Content3"><img src="img/ca_jz_20.jpg" alt="3"></li> <li id="myTab1_Content4"><img src="img/ca_jz_21.jpg" alt="4"></li> </ul> <ul class="cq_jz_effect_right cq_jz_effect_right2" id="myTab1"> <li onmouseover="nTabs(this,0);"><br/><p>可视化结果</p></li> <li onmouseover="nTabs(this,1);"><br/><p>精确尺寸</p></li> <li onmouseover="nTabs(this,2);"><br/><p>毫无痕迹的外观</p></li> <li onmouseover="nTabs(this,3);"><br/><p>方便安装</p></li> <li onmouseover="nTabs(this,4);"><br/><p>个性化底板</p></li> </ul> </div><br/><br/><br/> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.style.background = "#26bd83"; thisObj.style.color = "#fff"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].style.background = "#e5e5e5"; tabList[i].style.color = "#535353"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </body> </html>
