Question

我有4个图像链接，点击时需要显示特定的DIV。然后当点击剩余的3个图像中的另一个时，其DIV显示同时隐藏最后的DIV。我已经尝试了几种不同的方法，似乎无法按照我需要的方式进行。四个DIV占据页面上的相同空间。有人可以帮忙吗？

以下是我到目前为止设置HTML的方法：

<div id="content">

  <div id="info">
  <a href="#"><img src="../Images/yellowbutton.png" class="infolink" /></a>
  <a href="#"><img src="../Images/redbutton.png" class="infolink"/></a>
  <a href="#"><img src="../Images/greenbutton.png" class="infolink" /></a>
  <a href="#"><img src="../Images/bluebutton.png" class="infolink"/></a>

         <div id="level0">This is the home page for the levels</div>
         <div id="level1">this is the information on level 1</div>          
         <div id="level2">this is the information on level 2</div>
         <div id="level3">this is the information on level 3</div>
         <div id="level4">this is the information on level 4</div>

  </div>
</div>

Answer 1

您可以使用css和javascript

更改div的可见性

以下代码执行所需的行为（如果我理解正确： - ））：

<html>
<head>
<script>
function selectItem(item) {
    var availableItems = document.getElementsByClassName("itemToShow");   

    for (var i=0;i<availableItems.length;i++) {
        if (availableItems[i].id == item) {
            availableItems[i].style.display = "block";
        } else {
            availableItems[i].style.display = "none";
        }
    }
}
</script>

</head>
<body>
<div id="content">

  <div id="info">
  <a href="#" onclick="selectItem('level1')"><img src="../Images/yellowbutton.png" class="infolink" /></a>
  <a href="#" onclick="selectItem('level2')"><img src="../Images/redbutton.png" class="infolink"/></a>
  <a href="#" onclick="selectItem('level3')"><img src="../Images/greenbutton.png" class="infolink" /></a>
  <a href="#" onclick="selectItem('level4')"><img src="../Images/bluebutton.png" class="infolink"/></a>

         <div id="level0">This is the home page for the levels</div>
         <div id="level1" class="itemToShow">this is the information on level 1</div>          
         <div id="level2" style="display:none;" class="itemToShow">this is the information on level 2</div>
         <div id="level3" style="display:none;" class="itemToShow">this is the information on level 3</div>
         <div id="level4" style="display:none;" class="itemToShow">this is the information on level 4</div>

  </div>
</div>
</html>

基本思想是在单击锚点时调用javascript函数，传递必须显示的DIV的id。

然后，在javascript函数上，按css类（itemToShow）选择DIV。对于所选的每个DIV，如果其{等于通知的ID，则设置style="display:block"，否则设置为style="display:none"。

单击时显示单个img链接的不同div标签

1 个答案: