jQueryでdivをクリックし別窓で開く方法

このQ&Aのポイント
  • jQueryを使用してdivをクリックすると別のウィンドウで開く方法を教えてください。
  • 以下のコードを使用してdivをクリックしたときに別のウィンドウでリンクを開くようにしたいです。
  • 試みた方法ではうまくいかなかったので、どうにか修正してください。
回答を見る
  • ベストアンサー

jQueryでdivをクリックし別窓で開くには?

jQueryでdiv全体をクリックできるようにできたのですが、 どうしても別窓で開く方法が分かりません。 もう、5時間ほど調べましたが、うまくいきません。 どなたか下のコードが別窓で開くように修正していただけませんでしょうか? よろしくお願いいたします。 <script type="text/javascript"> $(function(){ $(".sample").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script>

  • golf90
  • お礼率55% (878/1594)

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 >'width=500,height=300' >という部分はべつになくてもいいのでしょうか? http://www.tagindex.com/javascript/window/open1.html このあたりが参考になると思います。 省略可能なオプションですので指定したい時は書きます。 設定できるオプション http://www.tagindex.com/javascript/window/open_option.html ようはポップアップウィンドウのようなウィンドウを開く際に良く使います。

その他の回答 (1)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 「JavaScript サブウィンドウを開く」で検索した結果を組み合わせれば良いです。 どんな複雑なプログラムも基本の組み合わせですから。 $(".sample").click ( function() { window.open ( $(this).find('a').attr('href') ); // サブウィンドウなら以下のような感じ // window.open ( $(this).find('a').attr('href'), 'newwin', 'width=500,height=300' ); });

golf90
質問者

お礼

教えていただき、ありがとうございました。 教えていただいた方法でうまくいきました。 てっきり、_blankを使うものだと決めつけて調べていたので 解らなかったののだと思います。 本当にありがとうございました。

golf90
質問者

補足

LancerVIIさん 度々すいません。 'width=500,height=300' という部分はべつになくてもいいのでしょうか? どうして横が500で縦が300と指定されているのか理由が解りません…。 よかったら教えてください。 よろしくお願いいたします。

関連するQ&A

  • jQueryでdivごとリンクする際の開き方の指定

    jQueryでdivごとリンクする際に 新しいウィンドウで開くものと、同じウィンドウで開くものを分けたいのです。 下にコードを載せています。 素人なりにおかしいかと思っている点は、 同じfunction()を続けて使っているところです。 2つのスクリプトをそれぞれ1つだけ書いた時はうまく動作します。 どのように書いたらよいでしょうか? よろしくお願いいたします。 ●新しいウィンドウで開きたいdiv要素 aaa,bbb,ccc ●同じウインドウで開きたいdiv要素 ddd,eee ------------------------------------------- <script type="text/javascript"> $(function(){ $(".aaa,.bbb,.ccc").click(function(){ window.open ( $(this).find('a').attr('href'), 'newwin' ); return false; }); }); </script> <script type="text/javascript"> $(function(){ $(".ddd,.eee").click(function(){ window.open ( $(this).find('a').attr('href'); return false; }); }); </script> -------------------------------------------

  • jqueryについて【初歩】

    見ていただきありがとうございます。 jqueryについて初歩的な質問です。 下記の記述は ひとつのボックスに対して内包するaタグのリンクを指定してボックスごとリンクにしているスクリプトになりますが、これにtargetの属性を付加させたいです。 しかしいろいろ試しましたがうまくいかず、ツンでます… jqueryに精通している方宜しければご回答いただけませんでしょうか? よろしくお願いいたします。 $(function(){ $(".sampleBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });

  • jqueryについて

    jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01~99(実績数)までのidを割り振る設定したいのですが可能でしょうか? 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか? 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか? $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });

    • ベストアンサー
    • AJAX
  • jqueryのコードについて

    $(function () { $("親要素").click(function () { window.location = $(this).find("a").attr("href"); return false; }); }); 上記jqueryのコードで 子要素のリンクを親要素に適用させていますが、 子要素にリンクがない場合も親要素にリンクが適用され クリックすると・・・/undefined にとばされます。 子要素にリンクがない場合は 親要素にリンクを適用しなようにするには どうしたらいいでしょうか。 お願いいたします。

  • JavaScriptコードの最適化

    JavaScript、超初心者です。 よくわからないので、同じコード3つ書いています。 もっと簡単に最適化されたコードはどう書けばよいですか? 宜しくお願いします。 $(function () { $(".aaa").click(function(){ window.open($(this).find("a").attr("href"), '_blank'); return false; }); $(".bbb").click(function(){ window.open($(this).find("a").attr("href"), '_blank'); return false; }); $(".ccc").click(function(){ window.open($(this).find("a").attr("href"), '_blank'); return false; }); });

  • jQueryでクリックされた要素のidを関数で取得

    以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。 関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。 [htmlソース] <a class='alphabet' id='a' href='' onclick="return false;">A</a> <a class='alphabet' id='b' href='' onclick="return false;">B</a> <a class='alphabet' id='c' href='' onclick="return false;">C</a> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.alphabet').click(function(){ function alertAlphabet(){ alert($(this).attr('id')); }; alertAlphabet(); }); }); </script>

  • 【js】attrで属性を取得するとき・・・

    js初心者です。 div全体をクリックしてリンクできるようにしたいと思い、下記ソースを書いています。 (js) <script type="text/javascript"> $(function(){ $(".go_content").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script> (html) <div class="go_content"> テキストが入りますテキストが入ります。 <a href="http://xxxxxxx" target="_top" ></a> </div> これで、通常なら思ったとおりに動作してくれます。 しかし、このソースはあるページのなかにiframeで表示させます。 なので、<a>にtarget="_top"を指定しています。 上記スクリプトのままだと、aのhref属性しか取得できずに、フレーム内でリンクしてしまいます。 一緒にtarget属性も取得するにはどうすればよいのでしょうか? 何か良い方法があれば教えてください。 よろしくお願いします。

  • jqueryの質問。

    毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。

  • jsでホイールクリックを無効にしたい

    javaScriptでホイールクリックを無効にする方法について教えて下さい。 IE10でホイールクリックを無効(新しいタブで開かなければOK)としたいのですが 以下javaScriptを実装しても新しいタブで開いてしまいます。 chromeであれば元のタブ上で開くことは確認済です。 $('a').click(function(e) {  window.location.href = $(e.target).attr('href');  return false; }); clickイベント内でログを出力してみましたが、ログが出力されなかったため IEでは、このclickイベントが実行される前にタブが開いているのでしょうか? また、jquery.detailclick.jsを読み込んで、以下を実装してみましたが、 これも動作しませんでした。 $(document).ready(function(){  $('a').bind("wheelClick",function(e){   return false;  }); }); コードが誤っている、別の方法で実装できる等、ご存知の方教えて頂けませんか?

  • ここから別窓に・・・・

    いつもお世話になっています。 このスクリプトについてです。 <SCRIPT LANGUAGE="JavaScript"> <!-- function kakunin(){ quest=confirm("表示します。\nいいですか?"); if(quest==true){ location.href="http://www.goo.ne.jp/"; }else{ location.href="http://www.goo.ne.jp/"; } } //--> </SCRIPT> 表示されるページを別窓で開くには、どのように書き換えればよいのか教えて下さい。

専門家に質問してみよう