JavaScript---选项卡

最新推荐文章于 2024-02-20 14:51:19 发布

maidu_xbd

最新推荐文章于 2024-02-20 14:51:19 发布

阅读量159

点赞数 1

分类专栏： JavaScript 文章标签：选项卡

本文链接：https://blog.csdn.net/maidu_xbd/article/details/98597206

版权

JavaScript 专栏收录该内容

65 篇文章 3 订阅

订阅专栏

选项卡效果如图：

/*自动换行*/
word-wrap: break-word;

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>选项卡</title>
    <style>
        #div1 .active {background:yellow;}
        #div1 div{
            margin-top: 10px;
            width:200px;
            height:200px;
            background:#CCC;
            border:1px solid #999;
            display:none;
            /*自动换行*/
             word-wrap: break-word;
        }
    </style>
    <script>
        window.onload=function()
        {
            var oDiv=document.getElementById('div1');
            var aBtn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByTagName('div');

            for(var i=0;i<aBtn.length;i++)
            {
                aBtn[i].index1=i;
                aBtn[i].onclick=function()
                {
                    for(var i=0;i<aBtn.length;i++)
                    {
                        aBtn[i].className='';
                        aDiv[i].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index1].style.display='block';
                    console.log(this.index1)
                }
            }
        }
    </script>
</head>

<body>
    <div id="div1">
        <span>选择：</span>
        <input class='active' type="button" value="A" />
        <input type="button" value="B" />
        <input type="button" value="C" />
        <input type="button" value="D" />
        <div style="display:block">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
        <div>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
        <div>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
        <div>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
    </div>
</body>

</html>