admin管理员组文章数量:1356935
I have an unordered list containing links.
I styled the list so that there is a "Click Me" image to the left of the link.
ul
{
list-style-image:url(/images/ClickMe.png)
}
The problem is: when the user clicks on "Click Me", they are not redirected and nothing happens.
How do I make a click of the list image trigger a click of the link in that list element?
<ul>
<li><a href="someurl">Some Url</a></li>
<li><a href="someotherurl">Some Other Url</a></li>
</ul>
I have an unordered list containing links.
I styled the list so that there is a "Click Me" image to the left of the link.
ul
{
list-style-image:url(/images/ClickMe.png)
}
The problem is: when the user clicks on "Click Me", they are not redirected and nothing happens.
How do I make a click of the list image trigger a click of the link in that list element?
<ul>
<li><a href="someurl">Some Url</a></li>
<li><a href="someotherurl">Some Other Url</a></li>
</ul>
5 Answers
Reset to default 4This is more of a CSS problem I think, because the list bullets are not actually part of the a tag. You can cheat by making the links "wide left" to include the bullets like this (see the jsfiddle snippet):
ul
{
list-style: disc;
list-style-position: inside;
padding: 0;
margin: 0;
}
a {
margin-left: -20px;
padding-left: 20px;
}
You can always make the item clickable through jQuery:
$("li").click( function (evt) {
location.href = $(this).find("a").attr("href");
});
I don't know if there's a better way to do it but this works by making the link size so that it includes the bullets to the left of the link.
a{
margin-left: -2em;
padding-left: 2em;
}
Incidentally, this also works, but does not pass validation, does anyone knows if there's a correct way of doing it?
<body>
<ul>
<a href="someurl"><li>Some Url</li></a>
<a href="someotherurl"><li>Some Other Url</li></a>
</ul>
</body>
If you only need the list to have those bullets, you can do it also without lists by making the links "list-item" displays:
<style>
a{
display:list-item;
list-style-image:url(/images/ClickMe.png);
list-style-position:inside;
}
</style>
<div style="padding:12px;">
<a href="someurl">Some Url</a>
<a href="someotherurl">Some Other Url</a>
</div>
http://jsfiddle/zp8QU/
本文标签：
版权声明：本文标题：javascript - How to make a click of the list image trigger a click of the link inside that list element? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743954832a2567945.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论