Как сделать, чтобы щелчок по изображению списка вызывал щелчок по ссылке внутри этого элемента списка? - PullRequest
Новая
       9

Как сделать, чтобы щелчок по изображению списка вызывал щелчок по ссылке внутри этого элемента списка?

5 голосов
/ 13 декабря 2010

У меня есть неупорядоченный список, содержащий ссылки.

Я разработал список так, чтобы слева от ссылки было изображение "Click Me". 

ul 
{ 
    list-style-image:url(/images/ClickMe.png)
}

Проблема в : когда пользователь нажимает «Click Me», они не перенаправляются и ничего не происходит.

Как сделать, чтобы щелчок по изображению списка вызывал щелчок по ссылке в этом элементе списка? 

<ul>
    <li><a href="someurl">Some Url</a></li>
    <li><a href="someotherurl">Some Other Url</a></li>
</ul>

Ответы [ 5 ]

4 голосов
/ 13 декабря 2010

Я думаю, что это больше проблема CSS, потому что маркеры списка на самом деле не являются частью тега.Вы можете обмануть, сделав ссылки "широко левыми", чтобы включить маркеры, подобные этой (см. Фрагмент jsfiddle ): 

ul
{ 
    list-style: disc;
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

a {
    margin-left: -20px;
    padding-left: 20px;
}
2 голосов
/ 13 декабря 2010

Вы всегда можете сделать элемент кликабельным через jQuery: 

$("li").click( function (evt) {
    location.href = $(this).find("a").attr("href");
});
1 голос
/ 13 декабря 2010

Я не знаю, есть ли лучший способ сделать это, но это работает, делая размер ссылки так, чтобы он включал маркеры слева от ссылки.

0 голосов
/ 13 декабря 2010

Кстати, это тоже работает, но не проходит проверку, кто-нибудь знает, есть ли правильный способ сделать это? 

<body>
    <ul>
        <a href="someurl"><li>Some Url</li></a>
        <a href="someotherurl"><li>Some Other Url</li></a>
    </ul>
</body>
0 голосов
/ 13 декабря 2010

Если вам нужен только список, чтобы иметь эти маркеры, вы можете сделать это также без списков, сделав ссылки «list-item»: 

<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/

...