div,ul,li,a { margin:0; padding:0; } ul,li { list-style:none; } body { font-size:14px; background-color:#f7f7f7; } a { color:#666; text-decoration:none; } a:hover { color:#F60; } #title li { float:left; margin-right:20px; border:1px solid #dedede; background:#FFF; width:40px; text-align:center; height:28px; line-height:28px; position:relative; z-index:1000; } #title,#wrap { clear:both; background-color:#FFF; width:300px; } #wrap { border:1px solid #dedede; height:300px; position:relative; top:-1px; padding:10px; } #wrap>div { display:none; } #wrap .active { display:block; } #title .ho { border-bottom:1px solid #FFF; } #title .ho a { color:#F60; }
步骤:
1、先找到是点击第几个,通过$(this)确定获取当前点击的index;
2、将以前显示的内容隐藏;
3、确定第几个应该显示,显示出来;
4、tab选项卡的title已经有高亮的, 去掉高亮;
5、给被点击的元素添加高亮效果。