<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>