版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26841579/article/details/80855992
<style>
ul {
width: 500px;
height: auto;
overflow: hidden;
background-color: #e5f4fd;
}
li {
margin: 5px;
list-style: none;
float: left;
text-align: center;
width: 100px;
background-color: aliceblue;
}
#textDiv {
width: 500px;
float: left;
text-align: center;
background-color: aliceblue;
overflow: hidden;
background-color: #e5f4fd;
}
li:hover {
background-color: #60baed;
}
.div1 {
overflow: hidden;
background-color: #e5f4fd;
width: 500px;
}
.active {
color: #e84a7e;
}
</style>
<script type="text/javascript">
var aDatas = [
"快过年了,大家可以商量着去哪玩吧~",
"精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",
"HTML5开发课程,让你熟练掌握移动应用开发技术",
"精通各种DOM类应用,熟练掌握面向对象编程思想(OOP)、熟悉JS面向对象开发方式 - 智能课堂 - www.zhinengshe.com",
"熟练掌握AJAX技术及相关应用(例如:新浪微博级应用) - 智能课堂 - www.zhinengshe.com",
"可以独立写出类似jQuery的小型库(支持各类选择符、事件类、DOM、自定义动画animate、AJAX……) - 智能课堂 - www.zhinengshe.com",
"精通JS运动特效技术,能完整实现各类网站所有动画特效,如 智能课堂 官网 - 智能课堂 - www.zhinengshe.com",
"掌握JS调试及优化技术、能兼容所有浏览器 - 智能课堂 - www.zhinengshe.com",
"精通JS事件对象及事件的工作机制,并能完成各类跨平台应用模块的开发 - 智能课堂 - www.zhinengshe.com",
"能独立开发表现和性能都很优秀的RIA应用 - 智能课堂 - www.zhinengshe.com",
"了解后台编程的相关知识,能够和后台工程师配合完成大型交互应用 - 智能课堂 - www.zhinengshe.com",
"熟悉正则表达式的编写、应用及高级表单验证技术 - 智能课堂 - www.zhinengshe.com"
];
window.onload = function () {
var aDiv = document.getElementById('div1');
var aTextDiv = document.getElementById('divtext');
var aui = document.getElementById('aul');
var aLi = aui.getElementsByTagName('li');
alert(aLi[i]);
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;//给Li标签定个标记
//点击效果。
aLi[i].onmousemove = function () {
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
this.className = 'active';
//改变每个div的值
aTextDiv.innerHTML = '<h2>' + (this.index + 1) + '月活动</h2><p>' + aDatas[this.index] + '</p>';
}
}
}
</script>
<body>
<div class="div1">
<ul id="aul">
<li class="active">
<h2>一月</h2>
<p>One</p>
</li>
<li><h2>二月</h2>
<p>One</p>
</li>
<li><h2>三月</h2>
<p>One</p>
</li>
<li><h2>四月</h2>
<p>One</p>
</li>
<br>
<li><h2>五月</h2>
<p>One</p>
</li>
<li><h2>六月</h2>
<p>One</p>
</li>
<li><h2>七月</h2>
<p>One</p>
</li>
<li><h2>八月</h2>
<p>One</p>
</li>
<li><h2>九月</h2>
<p>One</p>
</li>
<li><h2>十月</h2>
<p>One</p>
</li>
<li><h2>十一月</h2>
<p>One</p>
</li>
<li><h2>十二月</h2>
<p>One</p>
</li>
</ul>
<div id="divtext">
<h2>一月份</h2>
<p>一月份天气好</p>
</div>
</div>
</body>
</html>