javascriptでonclickを利用して同じ<a>に入っている、hrefのリンク先をページ移動せず表示することは可能でしょうか？

Question

robopit

35

32もっと見る

200pt

インターネットウェブ制作

javascriptでonclickを利用して同じ<a>に入っている、hrefのリンク先をページ移動せず表示することは可能でしょうか？

具体的に言いますとPHPのPEARのPagerを使ってページ送りを利用しているのですが
onclickをオプションで使い出来ようなので、javascrptを使ってページ移動せず表示できるのではと思ったのですが、get(this)のような感じで表示することはできるのでしょうか？

当方初心者なもので、解説付きでよろしくお願いします。

回答の条件

1人20回まで

登録：2011/10/29 20:16:58
終了：2011/10/30 15:47:28

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

kodairabase661802011/10/29 21:08:19

10pt

この方法はどうでしょう。

リンク先のサムネイルをプレビュー表示させるjavascript

http://www.signature-web.com/blog/signature_archive/2009/10/javascript_jquery_image_preview/

これはこれでよいものですが、今回の目的とは違う感じです。

あと、書き方が悪かったのですがコメント欄に解説付きでお願いします

2011/10/29 21:20:00

No.2

Cherenkov15044932011/10/29 21:13:36

10pt

Lightboxやツールチップ表示のことかな。このあたりのプラグインを使う。

ツールチップではないですね

検索結果のページ送りなので

2011/10/29 21:24:54

Cherenkov 2011/10/29 20:53:17

質問文の解説をお願いします。なにをどうしたいのかわかりにくいです。
robopit 2011/10/29 21:09:13

すいません

やりたいのはページ移動することのないPager機能を作ることです

PAERのPager機能にonnclickを入れられるらしいと聞いたので
それならばすこしjavascriptを追加するだけでページ移動しないPagerを実現できるのではと思ったので

$(this).html()みたいな感じで
$(this).herf()のようなものがないかと質問させてもらいした。

私の知っているやり方では、どうしてもjavascirptの処理→herfのリンク先に飛ぶという感じになってしまいます
okamotoy 2011/10/29 21:29:15

　　・hrefに記述するurlのソースを予めコピーする．
　　・自ページにそのソースを含め表示する．
　　　（ただし，onclickするまでは当該ページは非表示）
　　・onclickされたら，そのソースを表示状態にする．
で可能です．
　cgiやaspを使えばよいです．
　　

　しかし，hrefに書きたいurlが他人のサイトであったならばやり方としてはよろしくないと思いますよ．
　他者が書いた本をコピーして使うようなものなのですから．
Cherenkov 2011/10/29 21:36:00

これ？
http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/
robopit 2011/10/29 21:53:24

okamotoyさん

予めコピーするといのは
PEARのPagerの場合
変数に入れることでしょうか？

Cherenkovさん

たぶんこれを使えば出来ると思うのですが
PEARのPagerと一緒に使い方がわからないのです。
解説お願いできますのでしょうか？
okamotoy 2011/10/29 22:10:10

　ページャそのものを知らないので実装のしかたは指南できませんです．（知っていれば回答で書きました．）
　ただ，「ページを移動しない」という条件があったので私の知りうるやり方と問題点をコメントで書いた次第です．
robopit 2011/10/29 22:19:34

なるほど、ありがとうございました。
色々と試してみたいと思います
Cherenkov 2011/10/29 23:05:47

Pager使った事無いので
http://d.hatena.ne.jp/naohide_a/20090718/1247893587
http://blog.96q.org/2008/09/01/pear-pager-hidden-option/
robopit 2011/10/29 23:36:13

リンク先については把握済みです

Pagerは
<a href="/test.php?pageID=2" title="page 2">2</a>
みたいな感じで分割ページを出してくれます。

onclickオプションをいれと

onclick ='test'

<a href="/test.php?pageID=2" onclick ='test' title="page 2">2</a>

と表示してくれます。

なので
このhrefアドレスをページ移動せずに開く方法がjavascriptでないか探しています。
Cherenkov 2011/10/30 00:11:11

PagerにlinkClassを追加して、
linkClass = 'pagerLink';

$(function() {
$('.pagerLink').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('.contents').load(href);
});
});

contentsクラスの要素にloadする。
とか
robopit 2011/10/30 14:21:11

ページ移動せずページ送りはできたのですが
なぜかそれ以降もものをコピーしてしまうんですがなぜなんでしょうか？

cotentsのところを”＃01”にしているのですが

div=01

div=02

の順で設定している場合

01と情報出てしまいます02

表示場所を02にすると
02しかでなくなるのですが
Cherenkov 2011/10/30 14:47:09

ちょっと意味がわからないです。
PEAR::HTML_AJAXを組み合わせたサンプルがありました。
http://www.alberton.info/pear_pager_tutorial_javascript_navigation.html
デモ：http://www.alberton.info/pear_pager_tutorial_javascript_navigation_ajax_example.html
robopit 2011/10/30 15:11:07

すいません

01と情報出てしまいます02

↓

01と02のhtmlが両方出力されてしまいます。

<div=1>
テスト１
</div>

<div=2>
テスト２
</div>

だったのが

<div=1>
テスト１
</div>
<div=2>
テスト２
</div>
<div=2>
テスト２
</div>

みたいな感じになります
robopit 2011/10/30 15:22:24

すごいもっさりしてるのが気になりますが
PEAR::HTML_AJAXよさそうですね。
robopit 2011/10/30 15:45:04

解決しました。

たぶんですけど
出力先に読み込むページをすべて表示するために2重表示してたみたいなので

全体をdivで囲んでそこを出力先にしたら大丈夫でした

ありがとうございました。