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

时间:2021-12-01 06:25:13
<!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>
一个页面同时拥有俩个选项卡