c语言 菜单选项跳转,js实现菜单跳转效果

本文实例为大家分享了js实现菜单跳转效果的具体代码，供大家参考，具体内容如下

想要的效果图：

直接上代码

Document

.box {

width: 500px;

height: 300px;

/* border: 1px solid #ccc; */

margin: 50px auto;

}

span {

width: 80px;

height: 30px;

border: 1px solid #ccc;

display: inline-block;

text-align: center;

line-height: 30px;

}

.body {

margin-top: 5px;

width: 450px;

border: 1px solid #ccc;

height: 250px;

background: #eee;

}

.current {

color: red;

background: #555;

}

.body div {

display: none;

text-align: center;

line-height: 250px;

}

.body .active {

display: block

}

关注

推荐

热点

本地

段子

关注：早上吃什么？

推荐：中午吃什么？

热点：晚饭吃什么？

本地：宵夜吃什么？

段子：半夜吃什么？

var oSpan = document.querySelectorAll('span')

var oDiv = document.querySelector('.body').children

for (let i = 0; i < oSpan.length; i++) {

oSpan[i].index = i

console.log(oSpan[i].index);

oSpan[i].onclick = function () {

for (let k = 0; k < oSpan.length; k++) {

oSpan[k].classList.remove('current')

}

this.classList.add('current')

console.log(oSpan[i].index);

for (let k = 0; k < oSpan.length; k++) {

oDiv[k].classList.remove('active')

}

oDiv[this.index].classList.add('active')

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。