href属性に"javascript:void(0);"指定した場合、モバイルのWebブラウザでは「リンクが無効です」のメッセージが表示される場合があります。モバイルでの利用も想定している場合は、href属性に "#" を指定すると回避できますが、リンククリック時にページの上部に遷移してしまう問題が発生します。対処法としてはonclick 属性ではなくhref属性にJavaScriptの処理内容を記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
return false;
}
</script>
</head>
<body>
<a href="javascript:OnLinkClick();">Exec</a><br />
<br />
<div id="output"></div>
</body>
</html>
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
return false;
}
javascript:(実行するJavaScriptコード) の形式で記述します。リンクがクリックされると href内のJavaScriptコードを実行します。下記のコードでは OnLinkClick() 関数を呼び出します。 <a href="javascript:OnLinkClick();">Exec</a><br />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Duck";
return false;
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="OnLinkClick();">Exec (onclick)</a><br />
<br />
<div id="output"></div>
</body>
</html>
javascript:void(0); を記述します。onclick 属性にリンクがクリックされたときに実行するJavaScriptのコードを記述します。リンクがクリックされると onclick内のJavaScriptコードを実行します。下記のコドでは OnLinkClick() 関数を呼び出します。 <a href="javascript:void(0);" onclick="OnLinkClick();">Exec (onclick)</a><br />
<!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></title>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
return false;
}
</script>
</head>
<body>
<a href="#" onclick="OnLinkClick();">Exec1</a><br />
<a href="javascript:void(0);" onclick="OnLinkClick();">Exec2</a><br />
<br />
<div id="output"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
}
</script>
<a href="#" onclick="showHint(); return false;">詳しくはこちら</a>
