HTML部分
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>一月</p></li>
<li><h2>2</h2><p>二月</p></li>
<li><h2>3</h2><p>三月</p></li>
<li><h2>4</h2><p>四月</p></li>
<li><h2>5</h2><p>五月</p></li>
<li><h2>6</h2><p>六月</p></li>
<li><h2>7</h2><p>七月</p></li>
<li><h2>8</h2><p>八月</p></li>
<li><h2>9</h2><p>九月</p></li>
<li><h2>10</h2><p>十月</p></li>
<li><h2>11</h2><p>十一月</p></li>
<li><h2>12</h2><p>十二月</p></li>
</ul>
<div class="text">
<h2>1月份安排</h2>
<p>快過(guò)年了梳毙,大家可以商量著去哪玩吧~</p>
</div>
</div>
CSS部分
* { padding: 0;margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px;
margin: 50px auto 0;
padding: 10px 10px 20px 20px;
background: #eae9e9; }
.calendar ul { width: 210px;
overflow: hidden;
padding-bottom: 10px; }
.calendar li { float: left;
width: 58px;
height: 54px;
margin: 10px 10px 0 0;
border: 1px solid #fff;
background: #424242;
color: #fff;
text-align: center;
cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }
.calendar .active { border: 1px solid #424242;
background: #fff;
color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }
.calendar .text { width: 178px;
padding: 0 10px 10px;
border: 1px solid #fff;
padding-top: 10px;
background: #f1f1f1;
color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
JavaScript部分
window.onload=function(){
var aDatas=[
"快過(guò)年了哺窄,大家可以商量著去哪玩吧~",
"精通JavaScript開(kāi)發(fā)課程 - 結(jié)課標(biāo)準(zhǔn) - 有十條標(biāo)準(zhǔn)可讓大家修練成JS高手……",
"HTML5開(kāi)發(fā)課程,讓你熟練掌握移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)",
"精通各種DOM類應(yīng)用,熟練掌握面向?qū)ο缶幊趟枷耄∣OP)萌业、熟悉JS面向?qū)ο箝_(kāi)發(fā)方式 - 智能課堂 - www.zhinengshe.com",
"熟練掌握AJAX技術(shù)及相關(guān)應(yīng)用(例如:新浪微博級(jí)應(yīng)用) - 智能課堂 - www.zhinengshe.com",
"可以獨(dú)立寫(xiě)出類似jQuery的小型庫(kù)(支持各類選擇符坷襟、事件類、DOM生年、自定義動(dòng)畫(huà)animate婴程、AJAX……) - 智能課堂 - www.zhinengshe.com",
"精通JS運(yùn)動(dòng)特效技術(shù),能完整實(shí)現(xiàn)各類網(wǎng)站所有動(dòng)畫(huà)特效抱婉,如 智能課堂 官網(wǎng) - 智能課堂 - www.zhinengshe.com",
"掌握J(rèn)S調(diào)試及優(yōu)化技術(shù)档叔、能兼容所有瀏覽器 - 智能課堂 - www.zhinengshe.com",
"精通JS事件對(duì)象及事件的工作機(jī)制,并能完成各類跨平臺(tái)應(yīng)用模塊的開(kāi)發(fā) - 智能課堂 - www.zhinengshe.com",
"能獨(dú)立開(kāi)發(fā)表現(xiàn)和性能都很優(yōu)秀的RIA應(yīng)用 - 智能課堂 - www.zhinengshe.com",
"了解后臺(tái)編程的相關(guān)知識(shí)蒸绩,能夠和后臺(tái)工程師配合完成大型交互應(yīng)用 - 智能課堂 - www.zhinengshe.com",
"熟悉正則表達(dá)式的編寫(xiě)衙四、應(yīng)用及高級(jí)表單驗(yàn)證技術(shù) - 智能課堂 - www.zhinengshe.com"
];
var oDiv = document.getElementById('tab');
var aLi = oDiv.getElementsByTagName('li');
var oTxt = oDiv.getElementsByTagName('div')[0];
for(var i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].onmouseover=function (){
for(var j=0; j<aLi.length; j++){
aLi[j].className = '';
}
this.className = 'active';
oTxt.innerHTML = '<h2>'+ (this.index + 1) +'月份安排</h2><p>'+ aDatas[this.index]+'</p>';
};
}
};