用onclick替換其他div中的內容

Question

我正在嘗試使頁面的左側具有商店位置列表，左側具有div來顯示商店位置和營業時間。

每個商店的情況都不一樣，因此我嘗試使右側div中的內容顯示與您在頁面左側單擊的商店匹配的信息。 這是我目前擁有的 ，但還不是很好。

現在，這只是一個簡單的懸停，並且效果很好。 但是我遇到了一個新問題：鼠標離開“商店1”后，文本立即消失

我試圖通過使用onClick事件來解決此問題，但這會在div中顯示商店1的信息，如果您單擊商店2的鏈接，我不知道如何用商店2的信息替換它。 像這樣的東西 ，根本不起作用）

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/