js控制多个div的显现与隐藏

点击第一个一个按钮显示第一个一个div，点击第二个按钮显示第二个div并且隐藏第一个div

<div id="footer-top">
            <div class="displayOn"></div>
            <div class="displayOn"></div>
            <div class="displayOn"></div>
            <div class="displayOn"></div>
            <div class="displayOn"></div>
        </div>>

#footer-top :nth-child(1){
    position: absolute;
    top:25px ;
    left:125px ;
    display: none;
}
#footer-top :nth-child(2){;
    position: absolute;
    top:25px ;
    left:425px ;
    display: none;
}
#footer-top :nth-child(3){
    position: absolute;
    top:25px ;
    left:725px ;
    display: none;
}
#footer-top :nth-child(4){
    position: absolute;
    top:25px ;
    left:1025px ;
    display: none;
}
#footer-top :nth-child(5){
    position: absolute;
    top:25px ;
    right:140px ;
    display: none;
}

```javascript
    for (var i = 0; i <displayOn.length;i++){
        but[i].onclick = function () {
            for (var i = 0;i <displayOn.length;i++){
                displayOn[i].style.display = "none"
            }
            this.style.display = "block";
            alert( this.style.display)
    }
}

```

多了 分号，；
js也有点问题

#footer-top :nth-child(2){;

我这个代码哪里有问题吗，为什么无法完成