jQuery实现tab菜单切换

首先，页面引入jQuery插件。
然后来个简单的html结构：

        

            
标题一
            
标题二
            
标题三
            
标题四
        
        

            
内容一
            
内容二
            
内容三
            
内容四
        

然后添加一个css样式

            ul {
                height: 20px;
                width: 300px;
            }
            ul>li {
                float: left;
                margin-right: 20px;
                list-style: none;           
            }
            .box {
                border: 1px solid red;
                width: 300px;
                height: 200px;          
            }
            .content {
                display: none;
            }

最后就是jQuery代码，实现hover标题一时显示内容一，标题二显示内容二等等，以此类推。

//页面加载时默认显示第一个
        $("li").eq(0).css("color","blue");
        $(".content").eq(0).css("display","block");
        $("li").each(function (index) {
            $(this).hover(function () {
                $(this).css("color","blue").siblings().css("color","#000");
                $(".content").eq(index).css("display","block").siblings().css("display","none");
            })
        })

这样，jQuery实现简单的tab菜单切换效果就实现了。