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

Question

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

<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> активировать ссылку?

Редактировать 1:

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;
}

Answer 1

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

Возможно, потребуется некоторая настройка для IE6, но это примерно то, как вы это делаете.

Answer 2

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

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

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

Answer 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> , который я пожелаю.

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

Answer 4

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

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

Answer 5

Это сделает целым <li> объект как ссылка :

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

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

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

Answer 9

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

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

Answer 10

Я нашел простое решение:сделайте так , чтобы тег " li " находился внутри тега " a " .:

<a href="#"><li>Something1</li></a>

Answer 11

Ссылка Anchor href применяется к li:

#menu li a {
       display:block;
    }

Answer 12

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

Answer 13

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