点击一个div,另一个div做出对应反应,用js

2025-03-13 10:24:40
推荐回答(2个)
回答1:

keiu 的 jQuery 代码为正解。下面是用原生 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);
    }
};

回答2:

使用jQuery
$("#click div").click(function(){
var index=$(this).index();
$("#show div").eq(index).show("slow").siblings().hide("fast");
});