スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

javascript:void(0)





コンテンツの動的入れ替えの続きです。

下のコードは、「DOMとは」というリンクテキストをクリックしたら説明文が現れるものです。

<html>

<head>

</head>

<body>

<p><a href="javascript:void(0)" onclick="showText()">DOMとは</a></p>

<div id=dom style="border-style: dashed; border-width: 1px; width: 400px;">
上のリンクをクリックすると説明が表示されます。
</div>

<script type="text/javascript">
<!--

function showText(){
var article="";
article += "DOM(Document Object Model)とは、Webページの要素を階層構造で";
article += "管理するもので、これを使えば、HTMLに対してJavaScriptによる";
article += "アクセスが可能になります。";
document.getElementById("dom").innerHTML=article;
}

// -->
</script>

</body>

</html>


innnerHTML の記事のように、getElementById()とinnerHTMLを使い、イベントハンドラonclickで関数を呼び出せばいいです。

今回学習するのは、リンクテキストにイベントハンドラを設定する方法で、

<a href="javascript:void(0)" …>

のように、リンクのa要素のhref属性に「javascript:void(0)」と記述してリンクを無効にします。

実は、これはもっと簡単に書くこともできます。

<a href="javascript:;" …>



その他、以下のような書き方もあります。

<a href="#" onclick="…();return false;>

本来、href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。

return false というのは、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

この書き方は、本当はonclickイベントハンドラを実行したいだけなのだけど A タグでリンクをクリックさせる仕組みが必要で、やむなく # をつけて便宜的にページ最上部へリンクするものとし、return false でジャンプを無効化したものです。


関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/23-e4b2ab73
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。