How to make a click of the list image trigger a click of the link inside that list element?
I have an unordered list containing links.
I styl开发者_如何学JAVAed 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>
This 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.net/zp8QU/
加载中,请稍侯......
精彩评论