0

我有 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>
4

1 回答 1

0

css您可以使用和更改 div 的可见性javascript

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

<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，设置style="display:block"其 id 是否等于通知的 ID style="display:none"。

于 2013-08-09T17:53:15.603 回答