js选项卡的实现方法

最新推荐文章于 2023-10-21 00:36:26 发布

dawanai5802

最新推荐文章于 2023-10-21 00:36:26 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/onlylove2015/p/5594779.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<style>
    .active
    {
        background:#9CC;
    }
    .div2
    {
        width:215px;
        height:200px;
        border:1px #666666 solid;
        display:none;
    }
    input
    {
        width: 50px;
    }
</style>

<div id="div1">
    <input type="button" class="active" value="1"/>
    <input type="button" value="2"/>
    <input type="button" value="3"/>
    <input type="button" value="4"/>

    <div class="div2" style="display:block;">11</div>
    <div class="div2">22</div>
    <div class="div2">33</div>
    <div class="div2">44</div>
</div>

<script>
    window.οnlοad=function(){
        var odiv=document.getElementById('div1');//获取div

        var btn=odiv.getElementsByTagName('input');//获取div下的input
        var div2=odiv.getElementsByTagName('div') ;//获取div下的div

        for(i=0;i<btn.length;i++)//循环每个按钮
        {
            btn[i].index=i;            //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i
            btn[i].οnclick=function()  //按钮的第i个点击事件
            {
                for(i=0;i<btn.length;i++)  //循环去掉button的样式，把div隐藏
                {
                    btn[i].className='';   //清空按钮的样式
                    div2[i].style.display='none';  //隐藏div
                }
                this.className='active';  //自身添加active
                div2[this.index].style.display='block';  //this.index是当前div
            }
        }
    }
</script>


</body>
</html>

转载于:https://www.cnblogs.com/onlylove2015/p/5594779.html

dawanai5802

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js选项卡的实现方法

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><style> .active { background:#9CC...
复制链接

扫一扫