Html：在同一空間中保留多個點擊事件

Question

我有多個點擊事件，點擊時需要佔用相同的空間，以便只顯示一個事件，點擊時出現的對話框始終顯示在同一個位置。我的問題是，只有我寫的第一個盒子出現在所需的區域，而另一個分散在即使使用相同的代碼。

<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>

以上都是一些點擊事件，和下面的是他們應該適合在容器和點擊時出現的框。

.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;}

任何人有任何見解，爲什麼他們沒有在外面？

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'; 
    } 
}