在flag.html中书写Javascript代码,编写鼠标移入效果 定义存放每个月的flag的数组 获取需要使用的页面元素对象 对每个li的mouseover事件进行处理 去除所有li的active样式 为当前的li加上active样式 修改文本区显示的文字
时间: 2024-06-05 08:06:28 浏览: 135
// 定义存放每个月的flag的数组
var flags = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
// 获取需要使用的页面元素对象
var lis = document.getElementsByTagName("li");
var textArea = document.getElementById("text-area");
// 对每个li的mouseover事件进行处理
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
// 去除所有li的active样式
for (var j = 0; j < lis.length; j++) {
lis[j].classList.remove("active");
}
// 为当前的li加上active样式
this.classList.add("active");
// 修改文本区显示的文字
var monthIndex = this.getAttribute("data-month") - 1;
textArea.innerHTML = flags[monthIndex];
}
}
阅读全文