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

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

<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
anchor css html html-lists menu

11 ответов

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

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

104

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

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

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

17

просто чтобы выбросить эту опцию:

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

затем я могу применить любой стиль к

  • , который я хочу.

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

    • 12

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

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

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

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

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

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

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

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

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

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

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

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

    1

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

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

    0

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

  • ?

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

    display: block;

    от Ли До А, и вы закончили.

    что есть:

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

    -1

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