zoukankan      html  css  js  c++  java
  • 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");//增加一个边框样式
        });
    
    
    })




  • 相关阅读:
    Hello CnBlog
    boxshadow
    箭头函数
    Web存储机制
    闭包
    HTTP Cookie
    javascript执行环境和作用域链
    BFC
    iOS开发之创建颜色渐变视图View
    iOS之中国银联移动支付控件升级的问题
  • 原文地址:https://www.cnblogs.com/cxd1008/p/6372445.html
Copyright © 2011-2022 走看看