Question

所以，正如你所看到的，我在使用javascript来显示/隐藏元素，但是当你单击.png时它会显示文本，但不会隐藏其他元素的文本。我一直在翻阅这个剧本，谷歌正在寻找它，我无法想出答案。我想我需要另外一双眼睛，所以如果有人看看这个让我知道是否有错误或者我错过了一些代码。

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript">

function showStuff(id) {
    document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
}

</script>

</head> 

<body> 

<div class="content">

<section class="left">  

        <p>
            <a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');"><img src="character1.png" id="char1" /></a>

        </p> 

        <p>
            <a href="#" onclick="showStuff('character2');" onclick="hideStuff('character1');"><img src="character2.png" id="char2" /></a>
        </p> 

</section>

<section class="right">

        <span id="character1" style="display: none;">Show character1 information</span> 

        <span id="character2" style="display: none;">Character 2 information</span> 

</section>

</div>

</body> 
</html>

Answer 1

<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">

在此行中，您首先将属性onclick设置为showStuff('character1')，然后将重新分配给hideStuff('character2')。

因此，您应该将这两个函数调用包装到一个函数中，然后将该函数分配给onclick。

onclick="function() { showStuff('character1'); hideStuff('character2'); }

Javascript显示/隐藏元素，为什么这段代码不起作用？

1 个答案: