Question

我正在尝试创建一个隐藏一类div的函数，然后通过它的id显示其中一个div。这是我的，但我不确定这是否是正确的方法。如果有更好的方式我对它开放，或者有人可以识别此代码中的错误。我想要的是页面加载时没有可见的生物类，然后当点击图像时，具有相应id的bio出现在它的位置。搜索只给了我这个答案，这对我没有帮助。下面的代码在页面加载时生物类div不可见，可以单击图像，但点击时不显示div。希望这一切都有道理。

.bio {
  display: none;
}
#id1 {
  display: none;
}
#id2 {
  display: none;
}

<script language="JavaScript">
  function setVisibility(name, id) {
    document.getElementByClassName(name).style.display = "none";
    document.getElementById(id).style.display = "inline";
  }
</script>

<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');" ;>
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');" ;>

<div class="bio" id="id1">
  <h3>text</h3>
  <p>more</p>
</div>
<div class="bio" id="id2">
  <h3>text</h3>
  <p>more</p>

Answer 1

试试这个

<script type="text/javascript">     
    function setVisibility(name, id) {
        var x = document.getElementsByClassName(name);
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        document.getElementById(id).style.display = "inline";
    }
</script>

<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');">
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');">

<div class="bio" id="id1">
   <h3>text</h3>
   <p>more</p>
</div>
<div class="bio" id="id2">
   <h3>text</h3>
   <p>more</p>
</div>

Answer 2

尝试使用visibility属性。在这种情况下，您不必处理您的.bio容器。您可以专注于显示和隐藏您的内容。请参阅here。

请注意：使用您的解决方案，您始终可以看到设置容器。您还可以将visible属性附加到容器中，以获得空白区域（如果您先触发第二个按钮）。

Answer 3

我认为这是错误的。我们这样做：

function removeHidden(className) 
{
  var classes = className.split(' ');
  var newClasses = [];
  while (classes.length > 0) {
    var name = classes.shift();
    if (name != 'hidden' && newClasses.indexOf(name) < 0) {
      newClasses.push(name);
    }
  }
  return newClasses.join(' ');
}
function addHidden(className)
{
  return removeHidden(className) + ' hidden';
}
function setVisibility(name, id) 
{
  var x = document.getElementsByClassName(name);
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].id == id) {
      x[i].className = removeHidden(x[i].className);
    } else {
      x[i].className = addHidden(x[i].className);
    }
  }
}
setVisibility('bio', 'id1');

.bio {
    /* don't put here display: none */
    /* you can delete it if you have no other styles */
}

.hidden {
    display: none;
}

<input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id1');" ;>
<input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id2');" ;>

<div class="bio" id="id1">
  <h3>FIRST DESCRIPTION</h3>
  <p>description description description description description</p>
</div>
<div class="bio" id="id2">
  <h3>SECOND DESCRIPTION</h3>
  <p>description description description description description</p>
</div>

如何将图像设置为要显示的类：none，然后设置要显示的特定ID：内联

3 个答案: