まずは、以下のHTMLを見てください。
jQueryを使い、「A」が押されたら動的にiframeのsrcが変わるようしていきたいと思うのですが・・・
ここで、はまりました。
次に、はまったjsコードを見てください。
ここでしていることは、
例えば、
- 「B」がクリックされたら(3行目)
- 「B」のdata-idを取得し(4,5行目)
- そのdata-idを元に
- hogeディレクトリの中にあるhoge2-1(data-id).htmlをiframeに入れる(6行目)
ということをしています。
しかし、このままでは、
aタグのhref属性が効いてしまい、
せっかくiframeのsrc属性を変更しても、
また元に戻ってしまいます。(上記jsコード6行目)
そこで、以下のように変更!
aタグのクリックイベントをpreventDefault();でキャンセルしました。
それ以降の処理が完了しても、aタグのhref属性は効かないので、うまくいきます!
他にpreventDefault();をreturn false;にするやり方がありますが、
return false;以降の処理が走らないので、気をつけましょう!と自分の言い聞かせる・・・
これに関しては、以下の記事が参考になります。
ここに至るまで1日かかりました・・・。