it-swarm.com.ru

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

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

<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;
}
55
San
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

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

107
MiffTheFox

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

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

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

16
Eric

Просто добавьте эту опцию:

<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>, какой захочу.

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

15
Duncan

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

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

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

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

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

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

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

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

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

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

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

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

1
MrFlo

Якорная ссылка относится к:

#menu li a {
       display:block;
    }
0
K.H. Hirok

Я нашел простое решение: сделать тег "li" внутри тега "a":

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

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

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

0
Marineio