js+css实现tab菜单切换效果的方法

这篇文章主要介绍了js+css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js+css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下：

index.css如下：

* {  
     margin: 0px;  
     padding: 0px;  
 }  
 body {  
     width: 600px;  
     margin: 0 auto;  
     background-color: silver;  
 }  
   
 #contanier {  
     background-color: yellow;  
     width: 600px;height: 400px;  
 }  
   
 #tabNavi {  
     width: 600px;height: 30px;  
     background-color: #00bfff;  
     text-decoration: none;  
     list-style-type: none;  
 }  
   
 #tabNavi li {  
     float: left;  
     margin-right: 7px;  
      background-color: #008b8b;  
     color: white;  
     cursor: pointer;  
     width: 60px;  
     height: 28px;  
     line-height: 30px;  
     text-align: center;  
 }  
 #content {  
     width: 600px;height: 370px;  
     background-color: white;  
 }