jquery学习-树形菜单+选项卡

*{
margin:0;
padding:0;
}
.none{display:none;}
li{list-style:none;}
.h_sort{border:1px solid #dedede; width:300px;}
.h_list{font-size:14px;}
.h_sort h2{background:#dedede;height:30px;line-height:30px;padding:0 5px;}
.h_list p{
height:30px;
line-height:30px;
border-bottom:1px solid #ccc;
padding-left:18px;
cursor:pointer;
}
.h_list p.pbgs{background:#f8f8f8 url('../images/tabicon.gif') no-repeat -34px -555px;}
.h_list p.pbgz{background:#f8f8f8 url('../images/tabicon.gif') no-repeat -34px -590px;}
.subMenu{padding:8px 16px;}
.subMenu li{
background:url('../images/tabicon.gif') no-repeat -40px -529px;
padding-left:14px;
height:26px;
line-height:26px;
}
/**选项卡**/
.navtab{}
.navtab li{
float:left;
padding:4px 8px;
cursor:pointer;
border:1px solid #dedede;
background:#efefef;
}
.navtab li.onli{
background:#fff;
}
.content{
clear:both;
padding:10px 8px;
width:400px;
border:1px solid #dedede;
margin:0;
}
.content li{
line-height:28px;
}

$(document).ready(function() {
$("#mm>p").addClass("pbgs");
$("#mm>p").click(function() {
$("#mm>p").removeClass("pbgz");
$(this).addClass("pbgz");
$(".subMenu").not($(this).next(".subMenu")).hide();//除去p的下一个div页面其他div变为隐藏。。。
$(this).next(".subMenu").show();//所选div改变显示状
/*$(".subMenu").not($(this).next(".subMenu")).slideUp("fast");//除去p的下一个div页面其他div变为隐藏。。。
$(this).next(".subMenu").slideToggle("fast");//所选div改变显示状态*/
});

$("#navtab>li").mousemove(function(){
$("#navtab>li").each(function(){
$("#navtab>li").removeClass("onli");
})
$(this).addClass("onli");
var t=$("#navtab>li").index($(this));
$("#content>ul").each(function(i){
if(i==t)
{
$(this).show();
}else
{
$(this).hide();
}
})

})
});

帮助分类

常见问题

子菜单1

子菜单1

电子影票

子菜单1

子菜单1

电子影票

子菜单1

子菜单1

电影资讯

足球资讯

生活资讯

这里是电影资讯的内容

这里是电影资讯的内容

这里是电影资讯的内容

这里是电影资讯的内容

欢迎来到足球王国，在这里

欢迎来到足球王国，在这里

欢迎来到足球王国，在这里

这里是电影资讯的内容

这里是电影资讯的内容

这里是电影资讯的内容

这里是电影资讯的内容

这里是电影资讯的内容