一个页面同时拥有俩个选项卡

<!DOCTYPE html>
<html>
<head>
  <title>牙齿矫正</title>
  <meta charset="utf-8"/>
 <style type="text/css">
  .cq_jz_effect{width: 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{width: 700px;padding:30px;border:1px solid #ccc;text-align: center;display: none;height: 434px;}
.cq_jz_effect_right{width: 300px;float: left;}
.cq_jz_effect_right li:first-child{margin-top:0px;background: #26bd83;color: #fff;}
.cq_jz_effect_right li{width: 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;width: 700px;padding: 0;}
.cq_jz_effect_left2 li img{width: 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>

 

posted @ 2017-05-16 15:14  多幸运1号  阅读(452)  评论(0编辑  收藏  举报