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、给被点击的元素添加高亮效果。