js实现菜单跳转效果

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

想要的效果图：

直接上代码

 
 
 
 
  .box {
   width: 500px;
   height: 300px;
   
   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
  }
 



 
  
   关注
   推荐
   热点
   本地
   段子
  
  
   关注：早上吃什么？
   推荐：中午吃什么？
   热点：晚饭吃什么？
   本地：宵夜吃什么？
   段子：半夜吃什么？
  
 
 

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