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

那些不是ids而是课程。使用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，请访问以下链接

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();
});

这是一个小提琴：http://jsfiddle.net/h9z5rkxx/

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

4 个答案: