新内容取代旧的隐藏和显示

时间:2013-02-06 20:59:32

标签: javascript html show-hide

我正在隐藏和显示具有不同内容的div。当我点击链接时,我希望显示一个div。但是,当我点击另一个链接时,我希望新内容替换上一个。现在,它属于它而不是取代它。任何解决方案?

Javascript

function show(){

var links = {
link1: "content1",
link2: "content2",
link3: "content3",
link4: "content4"
};

var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}

function init(){

 var divs = document.getElementsByTagName("div");
 for (i = 0; i < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
var a = document.getElementsByTagName("a");
for(i = 0; i < a.length; i++){
   a[i].onclick = show;
}
}

window.onload = init;

1 个答案:

答案 0 :(得分:1)

每次显示你想要的代码之前,你需要运行隐藏它们的代码块。

制作本:

function hideAll() {
    var divs = document.getElementsByTagName("div");
     for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
}

init()移除此代码并将其替换为hideAll(),并在hideAll()开头添加对show()的调用。