無法在沒有頁面刷新的情況下單擊div中的span #id

Question

我有以下HTML結構

<div style="position:relative; width:500px; top:50px; letter-spacing:3px; width:650px; margin:auto; font-size:16px;">
<span id ='Alist' style='cursor:pointer;'>A</span>
<span id ='Blist' style='cursor:pointer;'>B</span>
<span id='Clist' style='cursor:pointer;'>C</span>
<span id='Dlist' style='cursor:pointer;'>D</span>
<span id='Elist' style='cursor:pointer;'>E</span>
..
..
..
</div>

單擊相應的字母將顯示一個名稱列表。

下面的Javascript代碼

$(document).ready(function() {
$('#Alist').on('click', function() {$('#A').show();});
$('#Blist').on('click', function() {$('#B').show();});
$('#Clist').click(function() {$('#C').show();});
$('#Dlist').click(function() {$('#D').show();});
$('#Elist').click(function() {$('#E').show();});
});

我試過了

.on / .click as you can see on #Alist and #Blist

當我單擊“ A”時，其他字母均不可單擊。 如果必須刷新頁面以單擊下一個字母。

怎么了 請讓我知道您是否需要任何不清楚的東西。

Answer 1

元素#A, #B ， #A, #B等漂浮或定位。 由於較高的z-index因此它們位於鏈接上方，並且鏈接不可點擊。