css代码

.content{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                border: 1px solid slateblue;
                position: relative;
            }
            .content .top{
                height: 50px;
                display: flex;
                justify-content: space-around;
            }
            .content .top a{
                display: block;
                height: 50px;
                width: 50px;
                line-height: 50px;
                text-align: center;
                border: 1px solid crimson;
                text-decoration: none;
            }
            span{
                display: block;
                position: absolute;
                top:80px;
                left: 50px;
                width: 400px;
                height: 400px;
                border:1px solid #6A5ACD;
            }

html代码

<div class="content">
            <div class="top">
                <a href="#">one</a>
                <a href="#">two</a>
                <a href="#">three</a>
                <a href="#">four</a>
            </div>
            <span class="one"style="display: none;" >111111111111111</span>
            <span class="two" style="display: none;">2222222222222</span>
            <span class="three"style="display: none;">33333333333</span>
            <span class="four" style="display: none;">44444444444444444</span>
        </div>

js代码

var oA= document.querySelectorAll('a');//获取a标签
            var oSpan = document.querySelectorAll('span');//获取span标签
            for(var i=0;i<oA.length;i++){ 
                oA[i].index = i;//赋值当前a标签的下标，用于寻找对应的span标签
                oA[i].onclick = function(){//绑定点击事件
                    for(var j = 0; j < oA.length; j++) {
                    oA[j].style.color = "";//清空所有a标签字体颜色，以便绑定当前选中元素的字体颜色
                    oSpan[j].style.display = "none";
                    }
                    this.style.color = 'red';
                    oSpan[this.index].style.display = "block";
                    
                                
            }
        }