• 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");//增加一个边框样式
        });
    
    
    })




  • 相关阅读:
    jqueryui 进度条使用
    第一阶段站立会议03
    第一阶段站立会议02
    第一阶段站立会议01
    找到了——电梯会议
    软件需求规格说明书
    团队项目计划会议
    软件开发团队简介
    找水王
    NABCD需求分析
  • 原文地址:https://www.cnblogs.com/cxd1008/p/6372445.html
Copyright © 2020-2023  润新知