0

只是显示/隐藏 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>

我的 div 然后有：

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

这 3 个 div 都包含许多其他 div，它们都没有类中的“newbox” - 但这可能会干扰？

链接位于这 3 个 div 之外：

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

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

有任何想法吗？谢谢！

4

3 回答 3

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"
于 2012-11-21T13:25:38.670 回答
0

在你的标题中试试这个

<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>
于 2013-12-02T16:37:54.320 回答
0

是不是很简单

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">
于 2012-11-21T13:16:41.573 回答