<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="gb2312"/>
<meta charset="gb2312"/>
<title>爱你的每一天</title>
<meta name="viewport" content="width=device-width" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<body>
<script type="text/javascript" charset="gb2312">
window.onload = function ()
{
var ali = $('#xq li');
var arr = ["如果上帝问我最想对你说什么?我会说:“我爱你”,如果非要在这份爱上加上一个期限,我希望是…… 一万年!", "你是我的心你是我的肝,你是我心里的葡萄干。你是我的肠你是我的胃,你是我心里的红玫瑰。.", "当我凝视到你的眼,当我听到你的声音,当我闻到你秀发上的淡淡清香,当我感受到我剧烈的心跳,我明白了:你是我今生的唯一!", "世界上只有“孟媛媛”这个名字,使我这样牵肠挂肚,像有一根看不见的线,一头牢牢系在我心尖上,一头攥在你手中。", "每一天都为你心跳,每一刻都被你感动,每一秒都为你担心。有你的感觉真好。", "我什么都可以放弃,但不能没有你。我要照顾你一生一世,把世上最好的东西给你,我要你成为最幸福的人。", "你知道么。当你说爱我的时候。我就觉得我拥有了全世界。我确定一定以及肯定我是爱你的。"];
var arry = ["妞妞", "老婆", "亲爱的", "媛媛", "达令", "宝贝", "乖乖"]
var i = 0;
for (i = 0; i < ali.length; i++) {
ali[i].index = i;
ali[i].onmousemove = function () {
for (i = 0; i < ali.length; i++) {
ali[i].className = "";
};
this.className = "active";
$("#content").html("<h3>"+(arry[this.index])+"!今天是星期"+(this.index+1)+"<h3>"+"<p>" +(arr[this.index])+"<p>");
}
}
}
</script>
<style>
#xq {
float:left;
width:1000px;
}
#xq li {
list-style-type:none;
width:80px;
height:50px;
background:#5a8eb5;
margin-left:20px;
font-size:18px;
float:left;
text-align:center;
line-height:40px;
}
#xq .active {
background:#bf63af;
color:#dcea1f;
}
#content {
border:2px solid #808080;
width:800px;
height:100px;
float:left;
line-height:20px;
}
#content p {
font-size:15px;
color:red;
}
#content h3 {
color:#c525eb;
}
</style>
<div id="xq">
<ul>
<li class="active">星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ul>
<div id="content">
</div>
</div>
</body>
</html>