javascript - 无法在不刷新页面的情况下单击 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等是 float 的或定位的。由于 z-index 较高，它们位于链接上方，并且链接不可点击。