javascript 简易选项卡

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    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)">标题1a>
            a href="javascript:void(0)">标题2a>
            a href="javascript:void(0)">标题3a>
        div>
        div class="content" id = ‘link-centent‘>

        div style=‘display: block;‘>
            span>内容1span>
        div>
        div >
            span>内容2span>
        div>
        div >
            span>内容3span>
        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;iAchild.length;i++){

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

            for(var j=0;jAchild.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>