JavaScript + Ajax 実践サンプル集

ブロック単位でクリックできるようにする

説明補足説明コードコメント投稿

このサンプルは、jQueryのfind(), attr()APIを利用してブロック単位でクリックできるようにしています。li要素にanchorとテキストが宣言されていますが、li要素の任意の場所をクリックするとanchorのhref属性に設定されているURLに移動します。

このサンプルを編集して試してみる | 新着サンプルのメールを受け取る

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Block clickable</title>
  <style type="text/css">
    body
    {
      margin: 10px auto;
      width: 470px;
    }
    a
    {
      color: #333300;
      text-decoration: none;
    }
    a:visited
    {
      color: #333300;
    }
    a:hover
    {
      color: #333300;
      text-decoration: underline;
    }
    h3
    {
      margin: 0;
      padding: 0 0 .3em;
    }
    p
    {
      margin: 0;
      padding: 0 0 .5em;
    }
    .pane-list
    {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pane-list li
    {
      background: #ecfad7;
      padding: 10px 20px 10px;
      border-top: solid 1px #c4df9b;
      cursor: pointer;
    }
    .pane-list li:hover
    {
      background: #f6ffe9;
    }
  </style>

}); 
</script>

</head>
<body>
  <ul class="pane-list">
    <li>
      <h3>
        <a href="http://jsajax.com/javascriptdhtml/default.aspx">DHTML</a></h3>
      <p>
        JavaScript, CSS, HTMLを利用したDHTMLのサンプルを公開しています。
      </p>
    </li>
    <li>
      <h3>
        Ajax</h3>
      <p>
        今、話題の<a href="http://jsajax.com/javascriptajax/default.aspx">Ajax</a>を利用したサンプルを公開しています。
      </p>
    </li>
    <li>
      <h3>
        jQuery</h3>
      <p>
        今、JavaScriptの世界でもっとも注目されている<a href="http://jsajax.com/javascriptjquery/default.aspx">jQuery</a>を利用したサンプルを公開しています。
      </p>
    </li>
  </ul>
</body>
</html>

このサンプルを編集して試してみる!

このサンプルは、li要素にclick時のイベントハンドラを登録しています。li要素の任意の場所をクリックするとイベントハンドラにコントロールが渡ります。イベント処理では、anchor要素を検索してhref属性に設定されているURLを取得してwindowオブジェクトのlocationプロパティに設定します。これでページが切り替わります。

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

<ul class="pane-list">
  <li>
    <h3>
      <a href="http://jsajax.com/...">DHTML</a></h3>
    <p>
      JavaScript, CSS, HTMLを利用したDHTMLのサンプルを公開しています。
    </p>
  </li>
</ul>

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ブロック単位でクリックできるようにする