<style type="text/css">

*{padding:0;margin:0;}

    #tab {

        margin:0 auto;

        width:205px;

        height:335px;

        background:#e8e8e5;

    }

    #tab li{

           width:50px;

           height:50px;

           background:#40403f;

           float:left;

           list-style:none;

           margin-left:12px;

           margin-top:10px;

           text-align:center;

           font-size:12px;

           color:white;

           line-height:25px;

           font-weight:700;

           border:1px solid #40403f;

    }

    #tab #text{

        width:178px;

        height:70px;

        border:1px white solid;

        background:#f0f0ef;

        float:left;

        position:relative;

        top:10px;

        left:12px;

    }

    #tab #text h2{

        margin-left:5px;

        margin-top:5px;

        font-size:16px;

        color:#4c4c4b;

    }

    #tab #text p{

        margin-left:5px;

        margin-top:5px;

        font-size:12px;

        color:#80807f;

    }

    #tab .active{

        color:#db6082;

        background:white;

    }

</style>

<div id="tab" clss="calendar">

    <ul>

        <li class="active"><h2>1</h2><p>JAN</p></li>

        <li><h2>2</h2><p>FER</p></li>

        <li><h2>3</h2><p>MAR</p></li>

        <li><h2>4</h2><p>APR</p></li>

        <li><h2>5</h2><p>MAY</p></li>

        <li><h2>6</h2><p>JUN</p></li>

        <li><h2>7</h2><p>JUL</p></li>

        <li><h2>8</h2><p>AUG</p></li>

        <li><h2>9</h2><p>SEP</p></li>

        <li><h2>10</h2><p>OCT</p></li>

        <li><h2>11</h2><p>NOV</p></li>

        <li><h2>12</h2><p>DEC</p></li>

    </ul>

    <div id="text">

    </div>

</div>

<script>

    window.onload=function()

    {

        var tab=document.getElementById("tab");

        var li=tab.getElementsByTagName("li");

        var text1=document.getElementById("text");

        // var p=text1.getElementsByTagName("p")[0];

        // var h2=text1.getElementsByTagName("h2")[0];

        var text=['快过年了，大家可以商量着去哪里玩吧!',

                  '寒假快结束了，是该时候写作业了',

                  '开学季了',

                  '四月是谈恋爱的季节.',

                  'love',

                  'you',

                  'forever',

                  'and',

                  'alongside',

                  'all',

                  'day',

                 ]

        for(var i=0;i<li.length;i++)

        {

            li[i].index=i;

            li[i].onmouseover= function()

            {

                  for(var i=0;i<li.length;i++)

                  {

                    li[i].className="";

                  }

                  this.className="active";

                  text1.innerHTML= '<h2>'+(this.index+1)+'月活动</h2><p>'+text[this.index]+'</p>';

            };

        }

    }

</script>