클릭하여 HTML 링크를 활성화하는 방법

클릭하여 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>링크 활성화를 클릭 하려면 어떻게해야합니까?

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

---

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

IE6에 대해 약간의 조정이 필요할 수 있지만 그 방법에 관한 것입니다.

---

Marineio가 말했듯이 javascript를 통해 의 onclick속성 <li>을 변경 하여 사용할 수 있습니다 location.href.

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

또는에서 여백이나 패딩을 제거하고 텍스트가 글 머리 기호를 넘지 않도록 <li>의 왼쪽에 큰 패딩을 추가 <a>할 수 있습니다.

---

이 옵션을 밖으로 던지려면 :

<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>에 적용 할 수 있습니다.

참고 : 검증 인은이 방법에 대해 불평 할 것입니다.하지만 당신이 저와 같고 그들 주위의 삶을 기반으로하지 않는다면, 이것은 잘 작동 할 것입니다.

---

링크 텍스트를 'p'태그 또는 이와 유사한 것으로 추가하고 해당 요소에 여백과 패딩을 추가하면 MiffTheFox가 제공 한 설정에 영향을주지 않습니다.

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

---

이것은 전체 <li>개체를 링크로 만듭니다 .

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

---

jqyery 이것은 jquery가 조금 더 짧은 또 다른 버전입니다. 가정 <a>소자 드 내부 <li>소자

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

---

다음은 작동하는 것 같습니다.

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

---

Or you can create an empty link at the end of your <li>:

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

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

This will create a full clickable <li> and keep your formatting on your real link. It could be useful for <div> tag as well

---

You could try an "onclick" event inside the LI tag, and change the "location.href" as in javascript.

You could also try placing the li tags within the a tags, however this is probably not valid HTML.

---

I found a easy solution: make the tag " li "be inside the tag " a ":

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

---

Anchor href link apply to li:

#menu li a {
       display:block;
    }

---

How to make the HTML link activated by clicking on the <li> ?

By making your link as big as your li: just move the instruction

display: block;

from li to a and you are done.

That is:

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

Side note: you can remove "ul" from your two selectors: #menu is a sufficient indication except if you need to give weight to these two rules in order to override other instructions.

---

Use jQuery so you don't have to write inline javascript on <li> element:

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 

참고URL : https://stackoverflow.com/questions/1121748/how-to-make-the-html-link-activated-by-clicking-on-the-li