html5实现银联海购商品分类列表

/**
* 商品分类列表展示
* Author zhangjiangfeng
* Date 2016/11/12
*/
$(function(){
var $navTab = $("#nav-tab"); //选项卡
var $navTabDetail = $navTab.find(".silder-kinds-detail");
var $leftNavTab = $(".all-product-kinds p");
var time = null;
//选项卡内容之间切换
/*$navTab.on("click","li", function(){
var $that = $(this);
$that.addClass("active").siblings().removeClass("active");
$navTabDetail.each(function(i){
var $_that = $(this);
$_that.hide();
});
$that.find(".silder-kinds-detail").show();
})*/

$navTab.children("li").hover(function(){
//清除定时器
clearInterval(time);
var $that = $(this);
$that.addClass("active").siblings().removeClass("active");
$navTabDetail.each(function(i){
var $_that = $(this);
$_that.hide();
});
//商品分类详情
$that.find(".silder-kinds-detail").show();
},function(){
//商品分类详情
time = setInterval(function(){
$navTab.hide();
},3000);
})

$leftNavTab.hover(function(){
$navTab.show();
});
})