SOURCE

var wrap = document.getElementsByTagName("span")
var div = document.querySelectorAll('.content div')
    for(var i =0;i<wrap.length;i++){
        //下标
        wrap[i].index = i
        wrap[i].onclick = function(){
            for(var j=0;j<wrap.length;j++){
                wrap[j].setAttribute("class","")
                div[j].style.display="none";
            }
            this.setAttribute("class","active")
            //显示对应div
            div[this.index].style.display = "block";
            
        }

}

<div class="wrap">
    <nav>
        <span class="active">java</span>
        <span>javascript</span>
        <span>jsp</span>
    </nav>

    <div class="content">
        <div style="display:block;">java</div>
        <div>javascript</div>
        <div>jsp</div>
    </div>
</div>

.wrap{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
nav{
    width: 300px;
    height: 50px;
    border-bottom: 1px solid red;
    display: flex;
}
span{
    height: 50px;
    line-height: 50px;
    flex-grow: 1;
    text-align: center;
    background: green;
    border-right: 1px solid black;
}
span:nth-of-type(3){
    border-right: none;
}
.content{
    height: 250px;
    background: gainsboro;
    position: relative

}
.content div{
    width: 100%;
    height: 100%;
    line-height: 250px;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    display: none;
}
.active{
    background: red;
}