web-dev-qa-db-ja.com

<li>をクリックして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;
}
htmlcssmenuhtml-listsanchor
61
San
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

IE6を微調整する必要があるかもしれませんが、それはあなたがそれをどのように行うかです。

112
MiffTheFox

Marineioが言ったように、<li>のonclick属性を使用して、javascriptを介してlocation.hrefを変更できます。

<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>
10
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

アンカーhrefリンクはliに適用されます：

#menu li a {
       display:block;
    }
0
Khandoker Hirok

私は簡単な解決策を見つけました：タグ「li」をタグ「a」の中に入れます：

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

LIタグ内で「onclick」イベントを試行し、javascriptのように「location.href」を変更できます。

Liタグをaタグ内に配置することもできますが、これはおそらく有効なHTMLではありません。

0
Marineio