javascript 简易选项卡

最新推荐文章于 2021-07-06 15:35:58 发布

as1405082

最新推荐文章于 2021-07-06 15:35:58 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whileke/p/11560201.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" >
        .xuanx{
            width: 600px;
            height: 300px;
            background-color: red;
        }
        .clearfix:after{
            content: '';
            visibility:hidden;
            height: 0;
            clear:both;
            display: block;
        }
        .nav a{
            color: #fff;
            text-decoration: none;
            height: 30px;
            width: 200px ;
            line-height: 30px;
            
            text-align:center;
            display: inline-block;
            background-color: #000;
            float: left;
        }
        .content{
            width: 600px;
            height: 270px;
            background-color: blue;
        }
        .content div{
            display: none;
        }
    </style>
</head>
<body>
    <div class="xuanx">
        <div class="nav clearfix " id = 'link'>
            <a href="javascript:void(0)">标题1</a>
            <a href="javascript:void(0)">标题2</a>
            <a href="javascript:void(0)">标题3</a>
        </div>
        <div class="content" id = 'link-centent'>

        <div style='display: block;'>
            <span>内容1</span>
        </div>
        <div >
            <span>内容2</span>
        </div>
        <div >
            <span>内容3</span>
        </div>
            
        </div>
    </div>

    <script type="text/javascript">
    var Aparent = document.getElementById('link');
    var Achild = Aparent.getElementsByTagName('a');
    var Div = document.getElementById('link-centent');
    var Divs = Div.getElementsByTagName('div');
    for(let i = 0;i<Achild.length;i++){

        // Achild[i].index = i;    这里是用var的解决方法，将每一次循环的索引进行存储，后面进行直接调用
        Achild[i].onclick = function(){

            for(var j=0;j<Achild.length;j++){
                Achild[j].style='';
                Divs[j].style='';
            }
            this.style.color= 'red';
            this.style.backgroundColor='blue';
            
            
            
            // Divs[this.index].style.display='block';
            Divs[i].style.display='block';
        }
    
    }

    </script>
</body>
</html>