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; 
}

index.html如下：
复制代码 代码如下: 
 
 
 
     
     
     
 
 
     
       

 
         
     
 

希望本文所述对大家的javascript程序设计有所帮助。

以上就是js+css实现tab菜单切换效果的方法的详细内容，更多请关注本站其它相关文章！