日期:2014-05-16  浏览次数:20322 次

常用基础js求教..
HTML code
<style>
<style>
a{ width:100px; height:100px; background:#CCC;}
.bb{ width:100px; height:100px; background:#666}
</style>
<div><a href="#">2</a><a href="#">3</a><a href="#">5</a></div>

点击2,给2附加样式aa,其他都不变,
点击3,给3附加样式aa,其它回复默认样式.



------解决方案--------------------
HTML code
<style>
<style>
a{ width:100px; height:100px; background:#CCC;}
.bb{ width:100px; height:100px; background:#666}
</style>
<div id="dv"><a href="#">2</a><a href="#">3</a><a href="#">5</a></div>
<script type="text/javascript">
    window.onload = function () {
        var as = document.getElementById('dv').getElementsByTagName('a');
        for (var i = 0, j = as.length; i < j; i++)
            //as[i].onclick = function () {//修改事件就好了
            as[i].onmouseover = function () {
                for (var i = 0, j = as.length; i < j; i++) as[i].className = '';
                this.className = 'bb';
            }
    }
</script>