码迷,mamicode.com
首页 > 其他好文 > 详细

如何设计点击点击一个div,其他div做出对应反应

时间:2015-04-24 19:04:15      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

<div id="show">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<div id="click">
<div>click1</div>
<div>click2</div>
<div>click3</div>
</div>

要求:1,点击click1,show对应显示1(2,3消失)
2,与此同时,click1的样式改变
3,点击其它click,显示类似

<script type="text/javascript">
window.onload = function() {
    var click_divs = document.getElementById("click")
        .getElementsByTagName("div");
    var show_divs = document.getElementById("show")
        .getElementsByTagName("div");
    for(var i = 0; i < click_divs.length; i++) {
        !function(a) {
            // 点击 #click div
            click_divs[a].onclick = function() {
                // #show div 全部隐藏
                for(var x = 0; x < show_divs.length; x++) {
                    show_divs[x].style.display = "none";
                }
                // 对应 #show div 显示
                show_divs[a].style.display = "block";
 
                // #click div 样式还原
                for(var y = 0; y < show_divs.length; y++) {
                    click_divs[y].style.fontWeight = "Normal";
                }
                // 对应 #click div 样式加粗
                click_divs[a].style.fontWeight = "Bold";
            };
        }(i);
    }
};
</script>

 

如何设计点击点击一个div,其他div做出对应反应

标签:

原文地址:http://www.cnblogs.com/OnlyCT/p/4454020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!