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

        <ul>
            <li>标题一</li>
            <li>标题二</li>
            <li>标题三</li>
            <li>标题四</li>
        </ul>
        <div class="box">
            <div class="content">内容一</div>
            <div class="content">内容二</div>
            <div class="content">内容三</div>
            <div class="content">内容四</div>
        </div>

然后添加一个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菜单切换效果就实现了。