js利用iframe實現(xiàn)選項卡效果

更新時間：2020年08月09日 16:01:39 作者：-Mr. Soze.

這篇文章主要為大家詳細介紹了js利用iframe實現(xiàn)選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js利用iframe實現(xiàn)選項卡的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
 .header{
 width: 400px;
 height: 40px;
 border:solid 1px red;
 }
 .header a{
 width: 100px;
 height: 40px;
 text-align:center;
 line-height:40px;
 display: inline-block;
 }
 .bgc{
 background-color: cyan;
 }
 .cont{
 width: 400px;
 height: 400px;
 border:dashed 1px saddlebrown;
 }
 .cont iframe{
 /*width: 400px;
 height: 400px;*/
 display: none;
 }
 #cont .show{
 display: block;
 }
 </style>
 </head>
 <body>
 <!--最外部-->
 <div class="content">
 <!--頭部-->
 <div class="header">
 <a class="bgc" target="iframe1" href="if1.html" >充話費</a><a target="iframe2" href="if2.html" >旅行</a><a target="iframe3" href="if3.html" >車險</a><a target="iframe4" href="if4.html" >游戲</a> 
 </div>
 <!--內(nèi)容-->
 <div class="cont" id="cont">
 <iframe class="show" name="iframe1" ></iframe>
 <iframe name="iframe2" ></iframe>
 <iframe name="iframe3"></iframe>
 <iframe name="iframe4" ></iframe>
 </div>
 </div>
 </body>
 <script type="text/javascript">
 window.onload=function(){
 
 var as=document.getElementsByTagName('a');
 //獲取所有的span 形成一個為spans的數(shù)組
 var iframes=document.getElementById('cont').getElementsByTagName('iframe')
 //獲取cont下所有的div 形成一個為divs的數(shù)組
 //console.log(divs); 
 for (var i = 0; i < as.length; i++)
 {
 as[i].index = i;//給數(shù)組spans添加一個index屬性 
 
 as[i].onclick=function(){ //i=0、1、2、3 含義：給數(shù)組中所有的span
 //標簽添加的一個onclick事件
 
 //點擊后，span的表現(xiàn)
 for (var i = 0; i < as.length; i++)//通過遍歷 當點擊時先取消掉span所有的屬性
 {
 as[i].className=''; 
 }
 //console.log(this);
 this.className='bgc'; 
 //spans包含了所有的span 因為點擊事件 ---點擊后（假如點的是第三個）
 //這時候this就是三
 
 for (var i = 0; i < iframes.length; i++) {
 iframes[i].className='';
 }
 console.log(this.index);//下標
 iframes[this.index].className='show';
 } 
 
 
 }
 }
 </script>
</html>

如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: