web-dev-qa-db-ja.com

JavaScriptなしでHTMLとCSSで 'div'全体をクリック可能にする方法

JavaScriptなしで有効なコード/マークアップを使用してクリックすると、div全体がクリック可能になり、別のページにリンクできるようにします。

私がこれを持っているなら、私は結果がしたいことです - 

<a href="#">
<div>This is a link</div>
</a>

W3Cバリデータは、ブロック要素はインライン要素の中に置かれるべきではないと言います。これを行うより良い方法はありますか？

htmlcssclick
118
Andy Lobel

javaScriptなしで有効なコードを使用してクリックすると、div全体が別のページにリンクされます。これは可能ですか？

教訓的な答え：いいえ.

既に別のコメントを付けているので、divタグ内にaをネストすることは無効です。

ただし、aタグをdivと同じように動作させることを妨げるものは何もありません。ただし、その中に他のブロックタグをネストすることはできません。それがあなたのマークアップに合っているなら、あなたのaタグにdisplay:blockをセットして、好きなようにそれをsize/floatしてください。

他の人が指摘したように、javascriptを避ける必要があるというあなたの質問の前提に反論するなら、あなたはonClickイベントハンドラを使うことができます。 jQueryはこれを簡単で保守可能にするための一般的な選択です。

83
Alex Norcliffe

リンクをdiv全体に埋めて、divをクリック可能にするように見せることができます。

CSS：

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML：

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>
141
Mario
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
75
Jamshid Hashimi

JSなしで、私はこのようにやっています：

私のHTML：

<div class="container">
  <div class="sometext">Some text here</div>
  <div class="someothertext">Some other text here</div>
  <a href="#" class="mylink">text of my link</a>
</div>

私のCSS：

.container{
  position: relative;
}

.container.a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; //these two lines are to hide my actual link text.
  overflow: hidden; //these two lines are to hide my actual link text.
}
20
Sinan Erdem

JavaScript /画像なしで私の解決策。 CSSのみが使用されました。全てのブラウザで動作します。

HTML：

<a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!">
  buy now<br />free shipping<br />no further costs
</a>

CSS：

.add_to_cart:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}

.add_to_cart {
  cursor:pointer;
  background-color:#EC5500;
  display:block;
  text-align:center;
  margin-top:8px;
  width:90px;
  height:31px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#E70000;
}

例があります https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

10
John

アンカー内のブロックレベル要素のネストは無効ではないHTML5にあります。 http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a）を参照してください。 -element.html 私はあなたがそれを使うべきだと言っているのではありませんが、HTML5では<a href="#"><div></div></a>を使うのが良いです。

それ以外の点では、受け入れられた答えが最良のものです。他のユーザが提案しているようにJavaScriptを使用することもまた「リンク」アクセス不能（検索エンジンなどを含むJavaScriptを使用していないユーザにとって）になるため、悪いです。

8
selfthinker

jQueryはあなたがそれを可能にするでしょう。

click()関数を調べます。 http://api.jquery.com/click/

例：

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});
4
Josh Foskett

<a></a>タグを追加してdivをその内側に配置し、divをリンクとして機能させる場合はhrefを追加することもできます。あるいは、Javascriptを使用して「OnClick」関数を定義してください。しかし、提供された限られた情報から、あなたの問題の文脈が何であるかを決定するのは少し難しいです。

3
Dot NET
.clickable {
  cursor:pointer;
}
1
Bruno

私の知る限りでは、少なくとも少しのJavaScriptが必要になります...

jQuery を使うことをお勧めします。

このライブラリを1行に含めることができます。そして、あなたはあなたのdivにアクセスすることができます

$('div').click(function(){
  // do stuff here
});

クリックイベントに応答します。

0
Sebastian Oberste-Vorth

私たちはこのように使用しています

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

使う

  <label for="1">

タグとキャッチはとあります

id=1

お役に立てれば。

0
AMB

このようなもの？

<div onclick="alert('test');">

</div>
0
Tys