Question

我正在尝试在左侧创建一个包含商店位置列表的页面，在左侧创建一个显示商店位置和小时数的div。

每个商店都有所不同，所以我试图让右侧div中的内容显示与您在页面左侧单击的商店相匹配的信息。 This is what I currently have，而且还不是很好。

现在，它只是一个简单的悬停，它工作正常。但是我遇到了一个新问题：只要你的鼠标离开“商店1”

，文字就会消失

我试图通过使用onClick事件来解决这个问题，但这会在div中显示商店1的信息，如果您点击商店链接，我不知道如何用商店2的信息替换它2.（something like this，根本不起作用）

function showDiv1() {
    document.getElementById('store1').style.display = "block";
    document.getElementById('rood').style.backgroundColor = "red";
}

function showDiv2() {
    document.getElementById('store1').style.display = "block";
    document.getElementById('rood').style.backgroundColor = "red";
}

基本上我有两个问题。

1：点击左侧的商店后，如何更换右侧div中的内容。

2：有一个更简单的解决方案。必须有。有人可以建议采取不同的方法吗？

到目前为止，我已经浪费了整整一个上午，所以非常感谢任何帮助！谢谢。

Answer 1

我建议使用一个可以处理所有div的函数，而不是为每个div创建一个函数。

    <div id="zweef" onmouseover="javascript:showdetail('<p>some detail here</p>')">
store 1</div>

    function showdetail(detail){
        document.getElementById('fiets').innerHTML=detail;
    }

Answer 2

替换div中的内容，您可以使用

 document.getElementById('store1').innerHTML='your text content';

更新了小提琴：http://jsfiddle.net/vzmnJ/1879/

用onclick替换不同div中的内容

2 个答案: