Fatal编程技术网
  • jquery/
  • 我应该如何使用jQuery在月份正确变化时更改事件列表？

我应该如何使用jQuery在月份正确变化时更改事件列表？

jquery html web

我应该如何使用jQuery在月份正确变化时更改事件列表？,jquery,html,web,Jquery,Html,Web,提前谢谢 我正在制作一个日历，其中有一列表示月份，一列表示事件，一列表示事件描述。当我在不同的月份剪辑时，我应该怎样做才能改变事件 “当月份正确变化时，我应该如何使用jQuery更改事件列表？” 这是我当前的代码 社区页面|活动 $（文档）.ready（函数（）{ $（'#description'）.hide（）； $（'.e1'）.hide（）； $（'.e2'）.hide（）； $（'.e3'）.hide（）； $（'.e4'）.hide（）； $（'.ev1'）。单击（函数（）{ $（

提前谢谢

我正在制作一个日历，其中有一列表示月份，一列表示事件，一列表示事件描述。当我在不同的月份剪辑时，我应该怎样做才能改变事件

“当月份正确变化时，我应该如何使用jQuery更改事件列表？” 这是我当前的代码


社区页面|活动
$（文档）.ready（函数（）{
$（'#description'）.hide（）；
$（'.e1'）.hide（）；
$（'.e2'）.hide（）；
$（'.e3'）.hide（）；
$（'.e4'）.hide（）；
$（'.ev1'）。单击（函数（）{
$（'#description'）.fadeIn（）；
$（'.e1'）.show（）；
$（'.e2'）.hide（）；
$（'.e3'）.hide（）；
$（'.e4'）.hide（）；
});
$（'.ev2'）。单击（函数（）{
$（'#description'）.fadeIn（）；
$（'.e2'）.show（）；
$（'.e1'）.hide（）；
$（'.e3'）.hide（）；
$（'.e4'）.hide（）；
});
$（'.ev3'）。单击（函数（）{
$（'#description'）.fadeIn（）；
$（'.e3'）.show（）；
$（'.e2'）.hide（）；
$（'.e1'）.hide（）；
$（'.e4'）.hide（）；
});
$（'.ev4'）。单击（函数（）{
$（'#description'）.fadeIn（）；
$（'.e4'）.show（）；
$（'.e2'）.hide（）；
$（'.e3'）.hide（）；
$（'.e1'）.hide（）；
});
});
身体{
背景图像：url（'http://subtlepatterns.com/patterns/kindajean.png');
顶部：0px；
右：0px；
底部：0px；
左：0px；
溢出x：隐藏；
溢出y：隐藏；
}
p、 h1、h2、h3、h4、h5、h6、跨度{
边际上限：0px；
边缘底部：0px；
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
}
#白酒吧{
身高：100%；
左：0；
排名：0；
位置：绝对位置；
宽度：1%；
背景色：白色；
右边框：1px实心#巴巴巴；
}
#月份{
宽度：17%；
身高：100%；
排名：0；
左：1%；
位置：绝对位置；
背景图像：线性梯度（左侧，rgb（22,21,26）0%，rgb（24,22,28）100%）；
背景图像：-o-线性梯度（左，rgb（22,21,26）0%，rgb（24,22,28）100%）；
背景图像：-莫兹线性梯度（左，rgb（22,21,26）0%，rgb（24,22,28）100%）；
背景图像：-webkit线性梯度（左侧，rgb（22,21,26）0%，rgb（24,22,28）100%）；
背景图像：-ms线性梯度（左侧，rgb（22,21,26）0%，rgb（24,22,28）100%）；
背景图像：-webkit渐变(
线性的
左上角，
右上角，
色阻（0，rgb（22,21,26）），
彩色光圈（1，rgb（24,22,28））
);
右边框：1px实心#3636；
}
#上半年{
字号：19px；
颜色：白色；
填充：20px；
}
#月里{
列表样式类型：无；
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
利润底部：3倍；
字体大小：14px；
颜色：#bdbd；
填充：5px0px 5px20px；
光标：指针；
-webkit过渡：所有.2s轻松；
-moz转换：所有.2s易用；
-ms转换：所有。2秒轻松；
-o型过渡：所有。2秒容易；
过渡：所有。2轻松；
}
#李：悬停{
背景色：rgba（120、120、120、12）；
-webkit过渡：所有.2s轻松；
-moz转换：所有.2s易用；
-ms转换：所有。2秒轻松；
-o型过渡：所有。2秒容易；
过渡：所有。2轻松；
}
#事件{
宽度：28%；
身高：100%；
排名：0；
左：18%；
位置：绝对位置；
背景图像：线性梯度（左侧，rgb（174170189）0%，rgb（190187199）100%）；
背景图像：-o-线性梯度（左，rgb（174170189）0%，rgb（190187199）100%）；
背景图像：-莫兹线性梯度（左，rgb（174170189）0%，rgb（190187199）100%）；
背景图像：-webkit线性渐变（左侧，rgb（174170189）0%，rgb（190187199）100%）；
背景图像：-ms线性梯度（左侧，rgb（174170189）0%，rgb（190187199）100%）；
背景图像：-webkit渐变(
线性的
左上角，
右上角，
彩色光圈（0，rgb（174170189）），
彩色光圈（1，rgb（190187199））
);
右边框：1px实心#B3；
}
#事件h1{
字号：21px；
颜色：黑色；
填充：20px；
}
#事件李{
列表样式类型：无；
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
利润底部：3倍；
字体大小：14px；
颜色：#333333；
填充：5px0px 5px20px；
光标：指针；
-webkit过渡：所有.2s轻松；
-moz转换：所有.2s易用；
-ms转换：所有。2秒轻松；
-o型过渡：所有。2秒容易；
过渡：所有。2轻松；
}
#李：悬停{
背景色：rgba（41127214.5）；
-webkit过渡：所有.2s轻松；
-moz转换：所有.2s易用；
-ms转换：所有。2秒轻松；
-o型过渡：所有。2秒容易；
过渡：所有。2轻松；
}
#描述{
宽度：500px；
背景色：白色；
身高：90%；
最高：50%；
利润率最高：-45%；
左：46%；
位置：绝对位置；
溢出：无；
}
#描述p{
填充：20px 20px 20px 20px；
}
月
一月
二月

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Mitchell Bregman">
    <meta charset="UTF-8">

    <title>Community Page | Events</title>

    <link rel="shortcut icon" href="">
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript">
        $(document).ready(function(){   

            $('#description').hide();
            $('.e1').hide();
            $('.e2').hide();
            $('.e3').hide();
            $('.e4').hide();

            $('.ev1').click(function(){
               $('#description').fadeIn();  
               $('.e1').show();
               $('.e2').hide();
                $('.e3').hide();
                $('.e4').hide();
            });

            $('.ev2').click(function(){
               $('#description').fadeIn();  
               $('.e2').show();
               $('.e1').hide();
                $('.e3').hide();
                $('.e4').hide();
            });

            $('.ev3').click(function(){
               $('#description').fadeIn();  
               $('.e3').show();
               $('.e2').hide();
                $('.e1').hide();
                $('.e4').hide();
            });

            $('.ev4').click(function(){
               $('#description').fadeIn();  
               $('.e4').show();
               $('.e2').hide();
                $('.e3').hide();
                $('.e1').hide();
            });



        });
    </script>
    <style type="text/css">
    body{
        background-image: url('http://subtlepatterns.com/patterns/kindajean.png');
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    p, h1, h2, h3, h4, h5, h6, span{
        margin-top: 0px;
        margin-bottom: 0px;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
    }
    #white_bar{
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        width: 1%;
        background-color: white;
        border-right: 1px solid #BABABA;
    }
    #months{
        width: 17%;
        height: 100%;
        top: 0;
        left: 1%;
        position: absolute;
        background-image: linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
        background-image: -o-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
        background-image: -moz-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
        background-image: -webkit-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
        background-image: -ms-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);

        background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0, rgb(22,21,26)),
            color-stop(1, rgb(24,22,28))
        );
        border-right: 1px solid #363636;
    }
    #months h1{
        font-size: 19px;
        color: white;
        padding: 20px;
    }
    #months li{
        list-style-type: none;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
        margin-bottom: 3px;
        font-size: 14px;
        color: #BDBDBD;
        padding: 5px 0px 5px 20px;
        cursor: pointer;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }
    #months li:hover{
        background-color: rgba(120, 120, 120, .12);
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }
    #events{
        width: 28%;
        height: 100%;
        top: 0;
        left: 18%;
        position: absolute;
        background-image: linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
        background-image: -o-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
        background-image: -moz-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
        background-image: -webkit-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
        background-image: -ms-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);

        background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0, rgb(174,170,189)),
            color-stop(1, rgb(190,187,199))
        );
        border-right: 1px solid #B3B3B3;
    }
    #events h1{
        font-size: 21px;
        color: black;
        padding: 20px;
    }
    #events li{
        list-style-type: none;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
        margin-bottom: 3px;
        font-size: 14px;
        color: #333333;
        padding: 5px 0px 5px 20px;
        cursor: pointer;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }
    #events li:hover{
        background-color: rgba(41, 127, 214, .5);
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }
    #description{
        width: 500px;
        background-color: white;
        height: 90%;
        top: 50%;
        margin-top: -45%;
        left: 46%;
        position: absolute;
        overflow: none;
    }
    #description p{
        padding: 20px 20px 20px 20px;
    }
    </style>

    </head>

    <body>
        <div id="white_bar">
        </div>
        <div id="months">
            <h1>Months</h1>
            <li class="jan">January</li>

            <li class="feb">February</li>
            <li class="mar">March</li>
            <li class="apr">April</li>
            <li class="may">May</li>
            <li class="jun">June</li>
            <li class="jul">July</li>
            <li class="aug">August</li>
            <li class="sep">September</li>
            <li class="oct">October</li>
            <li class="nov">November</li>
            <li class="dec">December</li>
        </div>
        <div id="events">
            <h1>Events</h1>
            <li class="ev1">1/2/13 - General Meeting</li>
            <li class="ev2">Event 2</li>
            <li class="ev3">Event 3</li>
            <li class="ev4">Event 4</li>
        </div>
        <div id="description">
            <p class="e1">
            <div style="margin: 0 auto; width:100%; height:400px;"><object type="text/html" data=".//Blank.html"" style="width:490px; height:1200px; margin:1%;"></object></div>
            </p>
            <p class="e2">event 2 desc</p>
            <p class="e3">event 3 desc</p>
            <p class="e4">event 4 desc</p>
        </div>
    </body>
</html>

    • $('#months li').click(function () {
    myClass = $(this).attr('class');
    $('.events').hide();
    $('.events.' + myClass).show();
});