javascript - 如何将 HTML block 设置为按钮？

Question

网站有一个缩略图列表，包含人名，身份证，照片，点击会弹出详情，但是点击图片或文字没有反应，只有点击空白处才有效:

<ul>
<li class="profile" id="0000">
   <img src="photo1.jpg" alt="thumbnail"/>
   <p>Name</p>
   <p>0000</p>
</li>
<li class="profile" id="0001">
   <img src="photo2.jpg" alt="thumbnail"/>
   <p>Name</p>
   <p>0001</p>
</li>
</ul>

并通过jQuery添加事件监听器

$(document).ready(function()
{
    $(".profile").click(function(event){});
});

如何让 li block 像一个按钮一样工作(display:block 不起作用)

Answer 1

您可以使用“a”标签来包裹您的 html 内容

<li class="profile" id="0000">
    <a>
       <img src="photo1.jpg" alt="thumbnail"/>
       <p>Name</p>
       <p>0000</p>
    </a>
    </li>

然后使用，

$(document).ready(function()
{
    $(".profile a").click(function(event){});
});

参见 demo