Question

在显示/隐藏div时遇到一些困难 -

基本上我想要实现的是拥有3个不同的链接，每个链接对应三个不同的div，其中只有一个在任何时候显示。我已经参考了这个教程 - http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/（标题为'这是一个新的演示，以响应任何时候只显示一个div的请求'）

这一切都正常，因为当我点击我的任何链接时，正确的div显示。我遇到的唯一问题是初始状态 - 我只希望第一个div最初显示，但目前它们都同时显示，直到我点击其中一个链接。

我在网站上复制了java -

<script> function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("class");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }
} </script>

我的divs然后：

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">

这3个div都包含许多其他div，其中没有一个在课堂上有“newboxes” - 但这可能会干扰？

链接位于这3个div之外：

<a href="javascript:showonlyone('newboxes1');">Learn HTML</a><a href="javascript:showonlyone('newboxes2');">Box2</a><a href="javascript:showonlyone('newboxes3');">Box3</a>

据我所知，我已经完全复制了教程中显示的方法，但是为此我的初始状态无法正常工作，而在教程页面上却是如此。

有什么想法吗？谢谢！

Answer 1

function showonlyone(element){
    for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
        var div = document.getElementById('newboxes'+i);
        if(i == element){
            div.style.display = 'block';
        }else{
            div.style.display = 'none';
        }
    }
}

使用：

showonlyone(1);
//This will show the div with ID="newboxes1"

Answer 2

不像

那么简单

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">

Answer 3

在标题中尝试此操作

<script>
    function showonlyone(thechosenone) {
        var newboxes = document.getElementsByTagName("div");
        for (var x = 0; x < newboxes.length; x++) {
            name = newboxes[x].getAttribute("class");
            if (name == 'newboxes') {
                if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
                } else {
                    newboxes[x].style.display = 'none';
                }
            }
        }
    }
</script>

其次是div框和链接

<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>

<div class="newboxes" id="newboxes1">
    <iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
    <iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
 <div class="newboxes" id="newboxes3">
    <iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>

隐藏/显示Divs - 初始状态

3 个答案: