1、this:当前发生事件的元素
2、value:改变标签里的内容(给input使用)
innerHTML:也改变标签里的内容(但是针对div、span等标签)
3、数组的定义与使用
-定义:arr=[1,2,3]
-使用:arr[0]
4、字符串连接
-作用:连接两个字符串
-问题:连接中的优先级(从前往后相加)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*div{*/
/*width: 200px;*/
/*height: 150px;*/
/*border: 1px solid #ccc;*/
/*}*/
*{
padding: 0;
margin: 0px;
}
#div1{
width: 190px;
height: 320px;
background: #ccc;
padding: 20px;
}
ul{
list-style: none;
width: 190px;
height: 240px;
clear: both;
}
ul li{
width: 50px;
height: 50px;
background: #434343;
color: #fff;
float: left;
text-align: center;
margin: 6px;
}
#div1 div{
background: #fff;
padding: 5px;
margin: 10px 5px 0 5px;
}
.active{
background: #ffffff;
color: red;
}
/*p{*/
/*line-height: 20px;*/
/*}*/
</style>
<script>
// window.onload = function(){
// var otxt = document.getElementById('txt');
// var obtn = document.getElementById('btn');
// var odiv = document.getElementById('div1');
// obtn.onclick = function(){
// odiv.innerHTML = otxt.value;
// }
// }
window.onload = function(){
var arr = [
'这是一月份的活动',
'这是二月份的活动',
'这是三月份的活动',
'这是四月份的活动',
'这是五月份的活动',
'这是六月份的活动',
'这是七月份的活动',
'这是八月份的活动',
'这是九月份的活动',
'这是十月份的活动',
'这是十一月份的活动',
'这是十二月份的活动',
];
var odiv = document.getElementById('div1');
var oli = odiv.getElementsByTagName('li');
var adiv = odiv.getElementsByTagName('div')[0];
for(var i = 0; i < oli.length; i++){
oli[i].index = i;
oli[i].onclick = function(){
for(var i = 0; i < oli.length; i++)
{
oli[i].style.background = '#343434'
oli[i].style.color = '#fff'
}
this.style.background = 'white';
this.style.color = "red";
adiv.innerHTML = '<h2>'+ (this.index + 1) + '月的活动</h2>' + arr[this.index];
}
}
}
</script>
</head>
<body>
<!--<input id="txt" type="text"/>-->
<!--<input id="btn" type="button" value="改变"/>-->
<!--<div id="div1"></div>-->
<div id="div1">
<ul>
<li class="active"><b>1</b><p>JAN</p></li>
<li><b>2</b><p>FER</p></li>
<li><b>3</b><p>MAR</p></li>
<li><b>4</b><p>ARP</p></li>
<li><b>5</b><p>MAY</p></li>
<li><b>6</b><p>JUN</p></li>
<li><b>7</b><p>JUL</p></li>
<li><b>8</b><p>AUG</p></li>
<li><b>9</b><p>SEP</p></li>
<li><b>10</b><p>OCT</p></li>
<li><b>11</b><p>NOV</p></li>
<li><b>12</b><p>DEC</p></li>
</ul>
<div>
<h2>1月活动</h2>
<p>快过年了,大家快乐健康会很好看</p>
</div>
</div>
</body>
</html>
分析:利用js,每点击一个月份,下边div出现不同的内容提示