人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jsをaタグのonClickにスマートに書く方法は?
<a href="javascript:void(0)" onClick="aaaa();return false">あああああ</a>
と書いているのですが、もっとスマートに書けないものでしょうか?
jQueryを使っています。

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:js いもの スマート タグ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Km1967
●27ポイント

anchorタグを使う限りは無理でしょうね。

buttonにするとかspanにするなどの代替措置を取るくらいでしょう。

SEO的にはanchorのほうがいいかもしれませんけど、

スクリプトに飛ばす時点でどうかと思いますし好みの問題でしょうね。

buttonだと基本的にはformが必要になってしまうので

spanにclassつけといてanchorみたいなstyleに整えれば良いでしょう。

<span class="anchor" onClick="aaaa();">あああああ</span>

URLは適当です。

http://copicopi.com/onclickfont.html

http://www.red.oit-net.jp/tatsuya/java/button.htm

◎質問者からの返答

なるほど。やはりそうですか。見た目がリンクでないならそれもありですね。リンクならそれっぽくわざわざするのはナンセンスかなと思いますので、今のままでいきます。

ちなみにaタグでhrefを無しにしたら行けるのでは、と思いましたが、hrefがないとリンクにならないんですね。


2 ● Cherenkov
●27ポイント

clickイベントをbindしてpreventDefault()でページ遷移させないサンプル。

http://jsfiddle.net/afV8J/


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
 $('#hoge').click(function(e){
 e.preventDefault();
 alert("iiiiii");
 });
});
</script>
</head>
<body>
<a href="" id="hoge">あああああ</a>
</body>
</html>
◎質問者からの返答

ありがとうございます。こういう手もあるんですね。


3 ● kebo987654
●27ポイント

onclick=""に書いていることをhrefの中に入れてみる。なんてのはどうですか?

<a href="javascript:alert( 'href' );void( 0 );">あいうえお!!!</a>
 ~~~~~~~~~

void( 0 );はundefinedを返すために必要ですので注意してください。

undefined以外を返すと、

<a href="javascript:null;">あいうえお!!!</a>
 ~~~~

このサンプルでは真っ白のページに「null」と表示されてしまいます。

◎質問者からの返答

なるほど、これで動作すればそれもありですね。


4 ● a532
●9ポイント

ジャンプしないのだから、

<style type="text/css"></p> <p><!--</p> <p>a{</p> <p>color:#0000ff;</p> <p>text-decoration:underline;</p> <p>cursor:pointer;</p> <p>}</p> <p>a:hover{</p> <p>color:#ff0000;</p> <p>}</p> <p>a:active{</p> <p>color:#000000;</p> <p>}</p> <p>--></p> <p></style>

</head>

<body>

あああああ


こういうことではないのでしょうか。

hover等はこちらで適当に装飾しました。

◎質問者からの返答

装飾の仕方はわかっていますが、余計に面倒になるので意味がないなと。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ