jquery-click イベントとhoverイベント
mmoで遊ぶついでにajaxの勉強を兼ねてページ遷移なしの情報サイトを作成中
Aタグでリンクを用意しておいて選択されたカテゴリのアイテムの一覧を出したいのですが
hoverイベントを使った場合にAタグのページを遷移する機能を無効化できずに悩み中
HTMLソース
[html]
アイテムリスト
[/html]
JAVASCRIPT — click Ver
[javascript]
$(function() {
$(“a.kind").click( function() {
var target = $(this).attr(“href");
var kind_id = $(this).attr(“id");
$(“#list").hide();
// tableタグの内容だけ取得
$(“#list").load( target +" table",{
kind_id: kind_id,
})
.fadeIn(“slow");
return false;
});
});
[/javascript]
このロジックで[武器]クリックしたら
[html]
[/html]
のところに武器一覧が表示されてページ遷移は起こらないんだけど
マウスカーソルが当たった段階で情報を表示する為に
.hoverでjavascriptをプログラムすると指定すると
/item/datalist/に遷移してしまう。。。
JAVASCRIPT — hover Ver
[javascript]
$(function() {
$(“a.kind").hover( function() {
・・・略
});
[/javascript]
return false;でリンクを無効化できるみたいなことがサイトに書いてあるのをみつけたけど
条件によってはできないのかな・・・？
検索結果がふわっとした感じで表示される「.fadeIn(“slow");」気に入ったかも(笑)
まだまだ分からないことが一杯だけど、「動きがあるWEBページ」が作れるのは面白いかも！
jqueryをうまく使うとHTMLソースを汚さないからレイアウト組むのも楽でいいですね。
現時点では解決策がわからないのでひとまず$(“a.kind").click( function() {}で進めていこうかな