web-dev-qa-db-ja.com

divをクリック可能にする方法は？

<div><span>shanghai</span><span>male</span></div>

上記のようなdivの場合、マウスをオンにすると、cursor：pointerになり、クリックすると、

javascript関数、その仕事をする方法は？

[〜＃〜] edit [〜＃〜]：そして、マウスがオンのときにdivの背景色を変更する方法は？

EDIT AGAIN：最初のスパンの幅を120pxにするにはどうすればいいですか？

javascriptcsshtmlclick
28
omg

「何か」のようなIDを付けてから：

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

背景色の変更（更新された質問による）：

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};
50
James

<div style="cursor: pointer;" onclick="theFunction()">

動作する最も簡単なものです。

もちろん、最終的な解決策では、マークアップをスタイリング（css）および動作（javascript）から分離する必要があります-この特定の問題を解決するだけでなく、マークアップ設計の優れた実践のために リスト上 を読んでください一般に。

26
macbirdie

JQueryを使用することをお勧めします。

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );
8
Liu Peng

ClickboxというCSSクラスを使用し、jQueryでアクティブにすることをお勧めします。

$(".clickbox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
 });

今やらなければならないことは、divをクリック可能としてマークし、リンクを提供することです：

<div id="logo" class="clickbox"><a href="index.php"></a></div>

さらに、マウスカーソルを変更するCSSスタイル：

.clickbox {
    cursor: pointer;
}

簡単ですね。

5
cldrr

onclick 属性を追加します

<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>

カーソルを変更するには、 cssのカーソル規則 を使用します。

div[onclick] {
  cursor: pointer;
}

セレクタは、IEの一部のバージョンでは機能しない属性セレクタを使用します。これらのバージョンをサポートする場合は、divにクラスを追加します。

2
Bjorn Tipling

それらの中で最も単純なもの：

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
2
Bouramas

質問を更新したとき、これはわかりにくい例です。

window.onload = function()
{
    var div = document.getElementById("mydiv");

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}
2
alexn
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

これにより、背景色も変更されます

2
Rakesh Juyal

このdivが関数の場合、style = "cursor：pointer"などのスタイルでcursor：pointerを使用し、onclick関数を使用することをお勧めします。

このような

<div onclick="myfunction()" style="cursor:pointer"></div>

しかし、 jquery または extjs のようなJSフレームワークを使用することをお勧めします

1
pedrofernandes