jquery之仿京东菜单

$(function () {//上菜单$("#ListTopUL li").hover(function () {//$(this).addClass("ListTopULhover");//$(this).siblings(this).removeClass("ListTopULhover");var i = $(this).index();document.title = i;$(".ListTopRight1").eq(i).show();$(".ListTopRight1").eq(i).siblings(".ListTopRight1").hide();});//左菜单$(".ListBodyLeftDiv").hover(function () {var a = $(this).children("a");a.addClass("ListBodyLeftDivAhover");var i = $(this).index();$(".listbodyRDiv1").eq(i).show();$(".listbodyRDiv1").eq(i).siblings(".listbodyRDiv1").hide();$("#listbodyRDiv").addClass("listbodyRDivborder");//增加一个边框样式}, function () {$(this).children("a").removeClass("ListBodyLeftDivAhover");});//中间内容$(".listbodyRDiv1").hover(function () {var i = $(this).index();$(".ListBodyLeftDiv").eq(i).addClass("ListBodyLeftDivhover");$(".ListBodyLeftDiv a").eq(i).addClass("ListBodyLeftDivAhover");$(this).show();//非常重要.上级隐藏自己在显示一下!!$("#listbodyRDiv").addClass("listbodyRDivborder");//增加一个边框样式}, function () {var i = $(this).index();$(".ListBodyLeftDiv").eq(i).removeClass("ListBodyLeftDivhover");$(".ListBodyLeftDiv a").eq(i).removeClass("ListBodyLeftDivAhover");$(this).hide();$("#listbodyRDiv").removeClass("listbodyRDivborder");//增加一个边框样式});//leftdiv整体$("#ListBodyLeft").hover(function () {}, function () {$(".ListBodyLeftDiv").removeClass("ListBodyLeftDivhover");$(".listbodyRDiv1").hide();$("#listbodyRDiv").removeClass("listbodyRDivborder");//增加一个边框样式});})

转载于:https://www.cnblogs.com/cxd1008/p/6372445.html

jquery之仿京东菜单相关推荐

jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...
jQuery仿京东无限级菜单HoverTree
官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...
手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
仿京东树形菜单插件hovertree
hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/ 欢迎下载使用查看绿色效果: http:// ...
jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
商品浏览时的css,jquery仿京东商品放大浏览页面
jquery仿京东商品页面京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面css的代码!!! *{ margin: 0 ...
php商品浏览页面,jquery仿京东商品放大浏览页面_实例分享
前面我们和大家分享过很多仿京东功能的文章,本文我们主要为大家详细介绍jquery仿京东商品浏览页面,鼠标放在图片上实现放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. j ...
用jQuery仿京东收货地址
代码优化及修正说明,新增两个功能,第一.指定parentId[用于筛选对应数据的根节点数],第二.返回所选择的数据数据及创建的class名称[用于重新绑定点击事件].代码实例及创建代码如下: < ...

jquery之仿京东菜单

jquery之仿京东菜单相关推荐

最新文章

热门文章