Question

我有多个点击事件，点击时需要占用相同的空间，因此只显示一个，并且点击时出现的框始终显示在同一个位置。我的问题是，只有我写的第一个框显示在所需的区域，而另一个框即使使用相同的代码也会分散。

＆＃13;

 <a href="javascript:unhide('box');"><div class="tag">Title</div></a>
 <a href="javascript:unhide('box2');"><div class="tag">Title</div></a>
 <a href="javascript:unhide('box3');"><div class="tag">Title</div></a>

＆＃13;

以上是一些点击事件，下面是他们应该适合的容器以及点击时显示的框。

＆＃13;

.descbox {
        background-color:purple;
        height: 150px;
        width: 705px;
        display: inline-block;
        overflow: auto;
    }

#box{
width: 620px;
height:120px;
font-size:17px;
border:groove 2px #ffdd88;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    border-top-left-radius:2px;
    border-top-right-radius:5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
background: #5d343a; /* Old browsers */
background: -moz-linear-gradient(left, #5d343a 8%, #7c5e63 25%, #7c5e63 80%, #5d343a 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(8%,#5d343a), color-stop(25%,#7c5e63), color-stop(80%,#7c5e63), color-stop(95%,#5d343a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* IE10+ */
background: linear-gradient(to right, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d343a', endColorstr='#5d343a',GradientType=1 ); }/* IE6-9 */
   
#box hover{ display: none;}

#box2{
width: 620px;
height:120px;
font-size:17px;
border:groove 2px #ffdd88;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    border-top-left-radius:2px;
    border-top-right-radius:5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
background: #5d343a; /* Old browsers */
background: -moz-linear-gradient(left, #5d343a 8%, #7c5e63 25%, #7c5e63 80%, #5d343a 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(8%,#5d343a), color-stop(25%,#7c5e63), color-stop(80%,#7c5e63), color-stop(95%,#5d343a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* IE10+ */
background: linear-gradient(to right, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d343a', endColorstr='#5d343a',GradientType=1 );} /* IE6-9 */
   
#box2 hover{ display: none;}

#box3{
width: 620px;
height:120px;
font-size:17px;
border:groove 2px #ffdd88;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    border-top-left-radius:2px;
    border-top-right-radius:5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
background: #5d343a; /* Old browsers */
background: -moz-linear-gradient(left, #5d343a 8%, #7c5e63 25%, #7c5e63 80%, #5d343a 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(8%,#5d343a), color-stop(25%,#7c5e63), color-stop(80%,#7c5e63), color-stop(95%,#5d343a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* IE10+ */
background: linear-gradient(to right, #5d343a 8%,#7c5e63 25%,#7c5e63 80%,#5d343a 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d343a', endColorstr='#5d343a',GradientType=1 );} /* IE6-9 */
   
#box3 hover{ display: none;}

＆＃13;

任何人都知道为什么他们不会外出？

This is what the code looks like when executed。它应该留在紫色的盒子里。

Answer 1

您的问题出在HTML标记中。如果您查看HTML，在box1的末尾，您将结束“descbox”div。这意味着你所有剩下的“盒子”div都在你的“descbox”div之外。

这是你的问题......你需要这一行：

<div id="box" class="hidden">Description</div></div>

是

<div id="box" class="hidden">Description</div>

对于之后的所有“盒子”div也是如此。所有这些都标有两个结束div标签。他们只需要标记一个。

您的javascript也永远不会隐藏之前选中的框。您只是将“unhidden”类添加到当前选定的框中。这意味着您新显示的框将显示，但旧框不会消失。

修复javascript：

在使新的元素可见之前，您需要获取当前未隐藏的元素。因此，您的取消隐藏功能可能如下所示：

function unhide(divID){
    var visibleItems = document.getElementsByClassName('unhidden');
    visibleItems[0].className = 'hidden';
    var item = document.getElementById(divID);
    if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
}

Html：在同一空间中保持多个单击事件

1 个答案: