Как активировать HTML-ссылку, нажав на <li>? - PullRequest
Новая
       128

Как активировать HTML-ссылку, нажав на <li>?

58 голосов
/ 14 июля 2009

У меня есть следующая разметка, 

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

<li> немного большой, с маленьким изображением слева, Я действительно должен нажать на <a>, чтобы активировать ссылку. Как я могу нажать на <li> активировать ссылку?

Edit1: 

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Ответы [ 13 ]

0 голосов
/ 31 мая 2013

Используйте jQuery, чтобы вам не приходилось писать встроенный JavaScript на элементе <li>: 

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
});
0 голосов
/ 14 июля 2009

Как активировать ссылку HTML, нажав на

?

Делая вашу ссылку такой же большой, как ваша li: просто переместите инструкцию 

display: block;

из li в a, и все готово.

То есть: 

#menu li
{
    /* no more display:block; on list item */

    list-style: none;
    background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

#menu li a
{
    display:block; /* moved to link */
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Примечание: вы можете удалить «ul» из ваших двух селекторов: #menu - достаточное указание, за исключением случаев, когда вам нужно придать вес этим двум правилам, чтобы переопределить другие инструкции.

0 голосов
/ 14 июля 2009

Вы можете попробовать событие "onclick" внутри тега LI и изменить "location.href", как в javascript.

Вы также можете попробовать разместить теги li внутри тегов a, однако это, вероятно, недопустимый HTML.

Страница:
...