[jQueryでのリンクについて]

上記のページを参考に、aタグをリンクにする処理を書いてみたのですが、質問が２点あります。

（１）
ダブルクリックしないとリンクが飛びません。
一回のクリックでページを飛ばす方法はありますでしょうか？

（２）
カーソルがテキストのアイコンになってしまうのですがこれをオンマウスしたときリンクと同じカーソルにする方法はありますでしょうか？

宜しくお願い致します。


$('.wrap').click(function() {
    location.href = $(this).attr('data-url');
});

shi_ue

2016/03/17 12:23

HTMLの方も載せてください。

行動規範の内容に同意します

回答2件

ベストアンサー

無理なやり方ですのできれいではありませんが、これでいかがでしょうか？
aタグをクリックしたときにfalseを返すことで無効にしています。
returnする直前にdivに対してクリックイベントを発生させています。

もし、使う場合にはidなど付与し、セレクタでそのidを指定してを使ってください。
このやり方だとaタグ全部をセレクタで指定していたりするのでこのまま使うのは厳しいと思います。

onmouseに関してはcssで実装できます。
http://www.tagindex.com/stylesheet/page/cursor.html

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
7<script>
8$(function(){
9	$('a').click(function(){
10		$('.wrap').trigger("click");
11		return false;
12	});
13	$(".wrap").click(function(){
14		location.href = $('a').attr("href");
15	});
16});
17
18</script>
19
20</head>
21<body>
22<div class="wrap">
23    <a href="http://yahoo.co.jp" >リンクテキスト</a>
24</div>
25</body>
26</html>

投稿2016/03/17 12:54

編集2016/03/17 12:57

T.Yokotani

総合スコア141

紹介された記事のコメントで指摘がありますが、特別な理由がなければ JavaScript (jQuery を含む) では実装しないと思います。

[ド素人メモ] divタグをリンクにする方法（jQueryをさらりと使います） - Qiita

html
1<style>
2a.sample {
3  display: block;
4}
5</style>
6</head>
7<body>
8
9<!-- HTML 4.01 方式 -->
10<div>
11  <a class="sample" href="http://example.com/">http://example.com/</a>
12</div>
13
14<!-- HTML 5 方式 -->
15<a href="http://example.com/">
16  <div>http://example.com/</div>
17</a>