单击链接时显示和隐藏 div答案

【问题标题】：show and hide div when clicking on a link单击链接时显示和隐藏 div
【发布时间】：2013-02-06 09:56:01
【问题描述】：

当我点击一个链接时，我希望一个 div 变得可见。但是，我需要通过检查它具有哪个 id 来知道单击了哪个链接来做到这一点。内容是隐藏的，但是当我单击链接时不会变得可见。我不允许使用 jquery。有什么解决办法吗？

Javascript

function show() {
    var a = document.getElementsByTagName("a");
    if (a.id == "link1") {
        document.getElementByID("content1").style.visibility = 'visible';
    } else if (a.id == "link2") {
        document.getElementByID("content2").style.visibility = 'visible';
    } else if (a.id == "link3") {
        document.getElementByID("content3").style.visibility = 'visible';
    } else if (a.id == "link4") {
        document.getElementByID("content4").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");
    a.onclick = show;
}

window.onload = init;

HTML

<head>
    <title>Inl1-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style-1.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="Uppg1.js"></script>
</head>
<body>
    <ul class="meny" id="menu">
        <li><a href="#" id="link1">Utvärdering/Feedback</a>
        </li>
        <li><a href="#" id="link2">Kontakt</a>
        </li>
        <li><a href="#" id="link3">Öppettider</a>
        </li>
        <li><a href="#" id="link4">Om Asperöd</a>
        </li>
    </ul>
    <div class="div" id="content1">
        <p>Du kan kontakta oss på följande nummer:
            <br/>040-123456</p>
        <p>Du kan även mejla oss:
            <br/>aperöd@hotmail.com</p>
    </div>
    <div class="div" id="content2">
        <p><b>Asperåd Äventyrsland</b>
        </p>
        <p>Växel: 0200-123456999 (kl.08:30-15)</p>
        <p>Stora Vägen 140</p>
        <p>289 22 Aperöd</p>
        <p>Skicka oss din <a href="Inl1-3.html">fråga</a>
        </p>
    </div>
    <div class="div" id="content3">
        <p>Vi har följande öppettider:</p>
        <p>Mån-Fre: 10:00 - 20:00</p>
        <p>Lör: 10:00 - 18:00</p>
    </div>
    <div class="div" id="content4">
        <p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa,
            <br/>men det kostar 500kr för att delta för en dag.</p>
        <p>Asperöd är fylld med turister som besöker platsen minst en gång per månad.</p>
        <p>Asperöd är bland de största nöjesparkerna i Scandinavien.</p>
    </div>
</body>

【问题讨论】：

标签： javascript html show-hide

【解决方案1】：

function show(a) {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
if (a.id == "link1") {
    document.getElementById("content1").style.visibility = 'visible';
}
else if (a.id == "link2") {
    document.getElementById("content2").style.visibility = 'visible';
}
else if (a.id == "link3") {
    document.getElementById("content3").style.visibility = 'visible';
}
else if (a.id == "link4") {
    document.getElementById("content4").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].setAttribute("onclick", "show(this);");
}

}

【讨论】：

欢迎来到 SO。请尝试改进答案的格式，使其更具可读性。
感谢您的建议，您的代码运行良好。但问题是新内容并没有取代旧内容。

【解决方案2】：

创建一个提供映射的链接对象。从事件中获取目标元素并存储其 id。然后使用 id 从 links 对象中获取正确元素的 id。

function show(event){
var links = {
    link1: "content1",
    link2: "content2",
    link3: "content3",
    link4: "content4"
};

for(var x = 0; x < links.length; x++){
   document.getElementById(links[id]).style.visibility = "hidden";
}

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

init 函数也有问题。由于a 是一个元素数组，您必须迭代此数组并将show 函数绑定到onclick 事件。

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(var x = 0; x < a.length; x++){
       a[x].onclick = show;
    }
}

工作示例：http://jsfiddle.net/538s2/

【讨论】：

它不起作用，困扰我的是我在控制台中没有收到任何错误
@DrWoolie 查看我关于迭代您检索的锚点数组的更新。
是的，现在它工作了。只有一个问题。当我单击新链接时，新内容不会替换旧内容。属于它。你知道我该如何解决这个问题吗？
@DrWooolie 查看更新。它只是在显示选定的之前将它们全部隐藏。
不，我正在尝试搜索更新的使用，完全没有运气。

【解决方案3】：

使用 div.style.display = 'block'; div.style.display = '无';

【讨论】：

隐藏效果很好。但我不认为那是它失败的地方。

【解决方案4】：

您需要以不同的方式进行操作。我做了一些改变。你可以复制并尝试这个

        <head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>

<script type="text/javascript">
function show(id){


if(id == 'link1'){
document.getElementById("content1").style.visibility = 'visible';
}
else if(id == 'link2'){
document.getElementById("content2").style.visibility = 'visible';
}
else if(id == 'link3'){
document.getElementById("content3").style.visibility = 'visible';
}
else if(id == 'link4'){
document.getElementById("content4").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");
a.onclick = show;
}

window.onload = init;
</script>
</head>

<body>

<ul class="meny" id="menu">
<li><a href="javascript:show('link1')" id="link1" >Utvärdering/Feedback</a></li>
<li><a href="javascript:show('link2')" id="link2">Kontakt</a></li>
<li><a href="javascript:show('link3')" id="link3">Öppettider</a></li>
<li><a href="javascript:show('link4')" id="link4">Om Asperöd</a></li>
</ul>

<div class="div" id="content1">
<p>Du kan kontakta oss på följande nummer: 
<br> 040-123456
</p>
<p> Du kan även mejla oss:
<br> aperöd@hotmail.com
</p>
</div>

<div class="div" id="content2">
<p><b>Asperåd Äventyrsland</b></p> 
<p>Växel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora Vägen 140</p>
<p>289 22 Aperöd</p>
<p>Skicka oss din <a href="Inl1-3.html">fråga</a></p>
</div>

<div class="div" id="content3">
<p>Vi har följande öppettider:</p>
<p> Mån-Fre: 10:00 - 20:00 </p>
<p> Lör: 10:00 - 18:00 </p>
</div>

<div class="div" id="content4">
<p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa, 
<br> men det kostar 500kr för att delta för en dag.
</p>
<p> Asperöd är fylld med turister som besöker platsen minst en gång per månad. </p>
<p> Asperöd är bland de största nöjesparkerna i Scandinavien. </p>
</div>

</body>

【讨论】：

我可以使用它，因为我需要将 js 代码放在一个单独的文件中
然后使用不同文件中的JS代码。有什么大不了的。搜索一下如何在不同页面使用JS