HTML与JavaScript实现Tab切换-优快云博客

本文链接：https://blog.youkuaiyun.com/Hocen_Jonin/article/details/73277594

<!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>

tab表单三种写法及问题