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

Ответ 1

#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

Для IE6 может потребоваться некоторая настройка, но это о том, как вы это делаете.

Ответ 2

Как сказал Marineio, вы можете использовать атрибут onclick <li> для изменения location.href, через javascript:

<li onclick="location.href='http://example';"> ... </li>

В качестве альтернативы вы можете удалить любые поля или отступы в <li> и добавить большое дополнение в левую часть <a>, чтобы избежать текста, перемещающегося по марке.

Ответ 3

Просто выберите эту опцию:

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

Это стиль, который я использую в своих меню, он сам делает элемент списка гиперссылкой (подобно тому, как можно сделать изображение ссылкой).
Для стилизации я обычно применяю что-то вроде этого:

nav ul a {
    color: inherit;
    text-decoration: none;
}

Затем я могу применить любой стиль к <li> что я желаю.

Примечание: Валидаторы будут жаловаться на этот метод, но если вы похожи на меня и не основываете свою жизнь вокруг них, это должно работать нормально.

Ответ 4

Это сделает весь объект <li> ссылкой:

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>

Ответ 5

Просто добавьте обертку текста ссылки в теге 'p' или что-то подобное и добавьте к нему этот элемент и добавьте его, таким образом, он не будет влиять на настройки, которые вам дал MiffTheFox, т.е.

<li> <a href="#"> <p>Link Text </p> </a> </li>

Ответ 6

jqyery это другая версия с jquery немного менее коротка. что элемент <a> находится внутри элемента <li>

$(li).click(function(){
    $(this).children().click();
});

Ответ 7

Или вы можете создать пустую ссылку в конце вашего <li>:

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

Это создаст полный clickable <li> и сохранит ваше форматирование на вашей реальной ссылке. Это может быть полезно для тега <div>, а также

Ответ 8

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

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

Ответ 9

Кажется, что работает следующее:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

Ответ 10

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

Сделав свою ссылку такой же большой, как ваш 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 является достаточным показателем, за исключением случаев, когда вам нужно придать вес этим двум правилам, чтобы переопределить другие инструкции.

Ответ 11

Используйте 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;
        });
    });
});