如何将HTML块设置为按钮？

问题描述：

该网站有一个缩略图列表，包含人名，ID和照片，如果点击它会弹出详细信息，但是当我点击照片或文字时它不会回应，只有当我点击空白时才会有效：如何将HTML块设置为按钮？

<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){}); 
});

添加事件侦听器，如何使像一个按钮李块行为（显示：块不工作）

你不需要任何改变，它应该按需要工作;也看[这个例子]（http://jsfiddle.net/yh5uu/）。 – scessor 2012-03-30 06:21:46

答

您可以使用“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

我终于找到了问题，我的代码不工作是因为我使用$（event.target）.attr（“id”）来获取详细信息，但是当我单击文本或img时，event.target不有ID属性。谢谢。 – Sheep 2012-03-30 16:52:31

答

当你装上点击，甚至处理由类一样，它只是选择的元素。你的代码有效;看到这个小提琴here

答

我不知道是否有使用这个列表项特别的原因，但如果有必要再试试这个，走班列的li元素：

<ul> 
    <li> 
     <a href="#" class="profile" id="0000"><img src="photo1.jpg" alt="thumbnail"/></a> 
     <p class="hide"><span>Name</span><br /><span>0000</span</p> 
    </li> 
    <li> 
     <a href="#" class="profile" id="0001"><img src="photo2.jpg" alt="thumbnail"/></a> 
     <p class="hide"><span>Name</span><br /><span>0001</span</p> 
    </li> 
</ul>

随后的jQuery ：

$(document).ready(function(){ 
    $('.profile').click(function($e){ 
     $e.preventDefault(); 
     $('p.hide').toggle(); 
    }) 
})

然后，只需在CSS中添加：

.hide { display: none; }

答

<style type="text/css"> 
    .profile{ 
     width : 100px; 
     list-style : none; 
     cursor : pointer; 
     background : #acce3c; 
     border : 1px solid gray; 
    } 

    .profile:active 
    { 
     background : #beeb5c; 
    } 
</style>

如何将HTML块设置为按钮？

相关推荐