怎样实现，div2中的月数，随点击而变化呢，困扰本人好久了，求大神知道一波，感激不尽。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易年历</title>
<style>
body {text-align:center;}
#div1 li{
height:50px;
width:50px;
float:left;
margin:13px;
list-style-type:none;
background-color:gray;
padding-top:5px;
}
#div ul{margin:0 auto;}
#div1 ul li h2{
color:blue;
position:relative;
top:-20px;
}
#div1 ul p{ position:relative;
top:-45px;

}
#div1 .active{background:red;}
#div1{border:1px solid black;
width:300px;
height:500px;
background:yellow;
margin:0 auto;
position:relative;
top:70px;
}
#div2{border:1px solid black;
height:130px;
width:280px;
position:relative;
top:10px;
left:10px;
float:left;

} 
</style>
<script>
  window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var aLi=oDiv.getElementsByTagName('li');
    var oTxt=oDiv.getElementsByTagName('div2')[0];
    for(i=0;i<aLi.length;i++)
    { aLi[i].index=i;
    aLi[i].onclick=function()
    {
    for(i=0;i<aLi.length;i++)
    {
    aLi[i].className=''; 
   
    }
    this.className='active';
oTxt.innerHTML='<h2>'+(this.index)+'月</h2><p>活动自己组织哦～</p>';
                                                                    
    }
    }
   } </script></head><body> <div id="div1">
<ul>
<li class="active"> <h2>1</h2> <p>aaa</p> </li>
<li> <h2>2</h2> <p>bbb</p> </li>
<li> <h2>3</h2> <p>ccc</p> </li>
<li> <h2>4</h2> <p>ddd</p> </li>
<li> <h2>5</h2> <p>eee</p> </li>
<li> <h2>6</h2> <p>fff</p> </li>
<li> <h2>7</h2> <p>ggg</p> </li>
<li> <h2>8</h2> <p>hhh</p> </li>
<li> <h2>9</h2> <p>iii</p> </li>
<li> <h2>10</h2> <p>jjj</p> </li>
<li> <h2>11</h2> <p>kkk</p> </li>
<li> <h2>12</h2> <p>nnn</p> </li>
</ul>

<div id="div2">
<h2>1月活动</h2>
<p>块过年了，大家自己玩吧...</p>
</div>

</div></body></html>

解决方案 »

  1.   

    你不是都写了吗<script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var aLi = oDiv.getElementsByTagName('li');
            var oTxt = document.getElementById('div2');
            for (i = 0; i < aLi.length; i++) {
                aLi[i].index = i;
                aLi[i].onclick = function () {
                    for (i = 0; i < aLi.length; i++) {
                        aLi[i].className = '';                }
                    this.className = 'active';
                    oTxt.innerHTML = '<h2>' + (this.index + 1) + '月</h2><p>活动自己组织哦～</p>';            }
            }
        }
    </script>
      

  2.   

    var oTxt=oDiv.getElementsByTagName('div2')[0]; 这句话写错了
      

  3.   

    为何用原生的js 直接用jQuery吧，选择器直接用CSS的选择器就能选到了，而且还封装了很多方法。
    比如这个元素
    <div id='qqqq'><div>$('#qqqq')就选中了这个元素
      

  4.   

    jquery 还没学。。
      

  5.   

    1楼不是给你纠正过来了吗?
    既然困扰那么久,不如花点时间学习 js 和dhtml
    参考www.jb51.net 在线dhtml手册, 新手不要学什么jquery, 等你dhtml各属性方法\事件都明白了,再看jquery.