如何将 3 个不同的 div 的可见性切换为三个相应的 div

Question

我正在尝试通过 3 个独立的对应图像来切换这 3 个 div 的可见性。我希望 div 在开始时被隐藏，并且在任何时候都只显示 1 个。任何帮助，将不胜感激。

这是我的 html:

<div class="us">
        <img src="img/Kelly.svg" class="usiconK grow" onclick="toggleVisibility('name-togglek');">
        <img src="img/Callum.svg" class="usiconC grow" onclick="toggleVisibility('name-togglec');">
        <img src="img/Jong.svg" class="usiconJ grow" onclick="toggleVisibility('name-togglej');">
    </div>

    <div class="us2 name-togglek" style="display: none;">
        <h2 id="redspacing">
            kelly hill
        </h2>
    </div>

    <div class="us2 name-togglec" style="display: none;">
        <h2 id="redspacing">
            callum nowlan-dias
        </h2>
    </div>

    <div class="us2 name-togglej" style="display: none;">
        <h2 id="redspacing">
            jong seul bae
        </h2>
 </div>

这是我的脚本：

<script> 
        var divs = ["name-togglek", "name-togglec", "name-togglej"];
var visibleDivId = null;

function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
  }

  hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
  var i, divId, div;

  for(i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);

    if(visibleDivId === divId) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}
</script>

Answer 1

您正在使用 getElementById，但 html 将这些标识符作为类，而不是 id。尝试更改为：

<div id="name-togglek" class="us2" style="display: none;">
    <h2 id="redspacing">
        kelly hill
    </h2>
</div>

其他 div 也是如此。

Answer 2

这些不是 id，而是类。使用 document.getElementsByClassName。简化您的代码：

 var divs = ["name-togglek", "name-togglec", "name-togglej"];
var visibleDivId = null;

function toggleVisibility(divId) {
    document.getElementsByClassName(divId)[0].style.display = "block";
    for(var i=0;i<divs.length;i++){
        if(divs[i] != divId){
          document.getElementsByClassName(divs[i])[0].style.display = "none";
        }
    }
}

Fiddle

Answer 3

TDDdev 是正确的下面是我在大约 2 分钟内敲出的一些代码，所以没有测试但应该没问题

为您添加了一个 jsfiddle 访问下面link

http://jsfiddle.net/yow677Lh/1/

Javascript:

function toggleVisibility(divId) {
for (var i = 0; i < divs.length; i++) {
    if (divs[i] === divId) {
        if ($(divs[i]).css("display") === "none") $(divs[i]).show();
    } else {
        if ($(divs[i]).css("display") !== "none") $(divs[i]).hide();
    }
}

}

Answer 4

我喜欢 jQuery 解决方案的想法，这个对我来说似乎有点简单：

$('.us img').on('click', function(){
    $($('.us2').get($('.us img').index($(this)))).show().siblings('.us2').hide();
});

这里是 fiddle：http://jsfiddle.net/h9z5rkxx/

如何将 3 个不同的 div 的可见性切换为三个相应的 div

how can I toggle the visibility of 3 different divs to three corresponding divs

html

javascript

jquery

hidden

toggle