tab表单三种写法及问题

来源：互联网发布：梵高色盲知乎编辑：程序博客网时间：2024/06/15 18:53
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/jquery-1.8.0.js"></script>    <style>        .div-tab-head{            width: 104px;            height: 32px;            float: left;        }        .div-tab-head>div{            width: 100px;            height: 30px;            border: 1px solid darkblue;        }        .box{            height: 800px;            width: 1200px;            float: left;        }        iframe{            border: none;            height: 800px;            width: 1200px;            display: none;        }        .show{            display: block;        }        .Odiv{            background-color: #2aabd2;            color: #fff;        }    </style></head><body>    <div class="box" id="box">        <iframe class="show" src="https://www.baidu.com/"></iframe>        <iframe src="http://www.w3school.com.cn/"></iframe>        <iframe src="http://www.runoob.com/jquery/jquery-tutorial.html"></iframe>    </div>    <div class="div-tab-head" id="div-tab-head">        <div class="Odiv">百度</div>        <div>W3c</div>        <div>菜鸟</div>    </div></body><!--jquery写法--><!--此方法获取子级元素时在webStorm会出现警告--><!--<script>-->    <!--$("#div-tab-head div").click(function() {-->        <!--var i = $(this).index();//下标第一种写法-->        <!--//var i = $('tit').index(this);//下标第二种写法-->        <!--$(this).addClass('Odiv').siblings().removeClass('Odiv');-->        <!--$('#box iframe').eq(i).show().siblings().hide();-->    <!--});--><!--</script>--><!--jquery find遍历子级元素--><!--显示正常--><!--<script>-->    <!--$("#div-tab-head").find('div').click(function(){-->        <!--var i = $(this).index();-->        <!--$(this).addClass('Odiv').siblings().removeClass('Odiv');-->        <!--$('#box').find('iframe').eq(i).show().siblings().hide();-->    <!--})--><!--</script>--><!--javascript写法--><script>    var Box = document.getElementById("box");    var Box_list = box.getElementsByTagName("iframe");    var OTab_head = document.getElementById("div-tab-head");    var Odiv = OTab_head.getElementsByTagName("div");//    alert(Odiv.length);    for(i=0,len = Odiv.length; i<len; i++){        Odiv[i].index = i;        Odiv[i].onclick = function(){            for(var n=0; n<len; n++){                Box_list[n].className="";                Odiv[n].className="";            }            Box_list[this.index].className="show";            this.className="Odiv";        }    }</script></html>
阅读全文
0 0