プロが教えるわが家の防犯対策術！

詳しい人求む！

Jqueryでclickさせる方法が分からない。

解決済

  • 質問者：usui-2015
  • 質問日時：
  • 回答数：2件

下記のhtmlでフォーカスを移動させる事は出来るが
クリックが出来ていない。

最初開いた時に、最後の行に移動させてフォーカスを
当てる所迄は出来ているが。その時に、最後の行を
クリックさせて表示をさせる事が出来ないでいる。

また、jとｌで移動させてフォーカスを当てる事は
出来ても、その時の行をクリックさせて、その内容
を表示させる事は出来ていない。

何れにしても、クリックが出来ていない。これをどの様に
すれば、クリック動作をする事が出来るのだろうか。

下記に今のファイルの内容を示します。
main.htmlの内容
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>メニュー</title>
<body>
<iframe src="menu.html" name="menu" width="12%" height="100%"align="left" style="margin-left:50px;"></iframe>
<iframe src="contents.html" name="contents" width="80%" height="100%"align="left"></iframe>
</body>
</html>

menu.htmlの内容
<html>
<head>
<title>メニュー</title>
</head>
<body>
<style>
li.hide{display:none;}
</style>
<input type="text" name="keyword" id="keyword">
<input type="button" value="choice" onclick="choice()">
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("#target a").on('focus',function(){

}).last(0).trigger("focus");
$("#target a").on('keydown',function(e){
var target_a=$(this);
if(e.keyCode==74){
var target_li=$(this).closest('li').prev('li');
target_a=target_li.length==0?$(this).closest('ol').find('a:last-child'):target_a=target_li.find('a');
}else if(e.keyCode==76){
var target_li=$(this).closest('li').next('li');
target_a=target_li.length==0?$(this).closest('ol').find('a:eq(0)'):target_a=target_li.find('a');
}
target_a.trigger('focus');
});
});
</script>
<ol id="target">
<li><a href="./150908-1504.html" target="contents">150908-1504</a></li>
<li><a href="./150908-1515.html" target="contents">150908-1515</a></li>
<li><a href="./150908-1518.html" target="contents">150908-1518</a></li>
</ol>
</BODY>
</HTML>

contents.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
最初はここに表示する
</P>
</BODY>
</HTML>

以下の150908-1504.html,150908-1515.html,
150908-1518.htmlは単にサンプルで何でも良いので表示を
するだけで、表示は何でも良いですが、一応書きます。

150908-1504.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
150908-1504
</P>
</BODY>
</HTML>

150908-1515.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
150908-1515
</P>
</BODY>
</HTML>

150908-1518.htmlの内容
<HTML>
<HEAD>
<TITLE>contents</TITLE>
</HEAD>
<BODY>
<P>
150908-1518
</P>
</BODY>
</HTML>

済みません。これに、クリックさせて表示を
右のフレームに表示させる方法をソースで
回答願います。

無理な質問で迷惑をかけますが、宜しくお願いします。

質問者からの補足コメント

  • うーん・・・

    済みません。

    具体的には、menu.htmlの<script>...</script>
    の所をどの様に変更すれば良いのでしょうか。

    すみません。その部分だけの例示をお願いします。
    宜しくお願いします。

    No.1の回答に寄せられた補足コメントです。 補足日時：2017/12/06 13:04
    通報する

  • うれしい

    有難う御座います。

    再度、整理してから質問を再提出します。
    有難う御座いました。

      補足日時：2017/12/07 05:29
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： yambejp
  • 回答日時：

targetをもつaのclickを別途定義すればいいでしょう。


functionで受け取ったイベントハンドラeを
e.preventDefault()で殺した上で、
iframeのsrcをアンカーのデータを元に書き換えてやります

<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('a[target]').on('click',function(e){
e.preventDefault();
$('iframe[name='+$(this).attr('target')+']').attr('src',$(this).attr('href'));
}).eq(0).trigger('click');
});
</script>
<a href="mypage.htm" target="hoge">iframe 更新</a>
<iframe name="hoge"></iframe>
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。

これを、最初開いた時にリンクの最後の行に
フォーカスを当てると言う事とセットで
スクリプトを書くとすると、全体では
どの様なソースに成るのでしょうか。

また、これは同じ事ですが、jとlでフォーカスを
移動した時にもこのクリックと言う事が全体の
スクリプトが私には分かりません。

済みません。全体が見えません。私のソースに
当てはめてソースを例示願います。

宜しくお願いします。

通報する
お礼日時：2017/12/06 12:53

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

フォーカス時に更新するならクリックイベント使う必要ないですね


前回のとまとめるとこうです。

<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("#target a").on('focus',function(){
$("#target a").css({"background-Color":""});
$(this).css({"background-Color":"red"});
$('iframe[name='+$(this).attr('target')+']').attr('src',$(this).attr('href'));
}).last(0).trigger("focus");
$("#target a").on('keydown',function(e){
var target_a=$(this);
if(e.keyCode==74){
var target_li=$(this).closest('li').prev('li');
target_a=target_li.length==0?$(this).closest('ol').find('a:last-child'):target_a=target_li.find('a');
}else if(e.keyCode==76){
var target_li=$(this).closest('li').next('li');
target_a=target_li.length==0?$(this).closest('ol').find('a:eq(0)'):target_a=target_li.find('a');
}
target_a.trigger('focus');
});
});
</script>

<ol id="target">
<li><a href="./150908-1504.html" target="contents">150908-1504</a></li>
<li><a href="./150908-1515.html" target="contents">150908-1515</a></li>
<li><a href="./150908-1518.html" target="contents">150908-1518</a></li>
<li><a href="./150908-1811.html" target="contents">150908-1811</a></li>
<li><a href="./150908-2004.html" target="contents">150908-2004</a></li>
<li><a href="./150909-0105.html" target="contents">150909-0105</a></li>
<li><a href="./150909-0652.html" target="contents">150909-0652</a></li>
<li><a href="./150909-0925.html" target="contents">150909-0925</a></li>
<li><a href="./150909-1011.html" target="contents">150909-1011</a></li>
<li><a href="./150909-1121.html" target="contents">150909-1121</a></li>
<li><a href="./150909-1232.html" target="contents">150909-1232</a></li>
<li><a href="./150909-1423.html" target="contents">150909-1423</a></li>
<li><a href="./150910-0046.html" target="contents">150910-0046</a></li>
</ol>

<iframe name="contents"></iframe>
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。

menu.htmlで完結していますが。
済みません。この様な事を、実は、
今の上下では無くて、左右に表示をしたいのですが。
今のは、上にメニューを下にその内容を表示しています。

これを、左にメニューを右に内容を表示したいのですが。

その為にmain.htmlで、iframeを2つ使ってそれぞれの
ソースをmenu.htmlとcontents.htmlに分けています。

それで、このmenu.htmlのスクリプトでcontents.html
のiframeの所に表示をしたいと言うのが質問の趣旨です。

済みません。質問が分かりにくくて。
宜しくお願いします。

通報する
お礼日時：2017/12/06 14:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報