親要素をクリックしたら子要素のリンクを発動させる方法

親要素をクリックしたら子要素のリンクを発動させる方法

  • 2017-02-04  最終更新日:2017-02-04

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。

例えばli要素の中にdiv要素とdl要素がありそこのdt要素内にa要素が入っているけどli要素全体をリンクにしたい場合の対処方法です。

cssでやる方法は一つ上の要素を全体リンクにする方法はありましたが子要素のリンクはなかったのでjQueryを使ってご紹介します。


スポンサーリンク


HTMLファイルとjQuery

例として以下のhtmlとします。 li要素内にdiv要素とdl要素があります。li要素をクリックしたらdl要素内のdt要素の中のaリンクが発動するという仕組みです。

<div id="test">
<ul>
  <li>
  <div class="icon"><a href="#url1"><img src="/img/gazou.jpg"></a></div><dl>
  <dt><a href="#title1">タイトルタイトルタイトルタイトルタイトルタイトル</a></dt>
  <dd>テキストテキストテキストテキストテキスト<span><a href="#link1">テキストリンク</a></span></dd>
  </dl>
  </li>
  <li>
  <div class="icon"><a href="#url2"><img src="/img/gazou.jpg"></a></div><dl>
  <dt><a href="#title2">タイトルタイトルタイトルタイトルタイトルタイトル</a></dt>
  <dd>テキストテキストテキストテキストテキスト<span><a href="#link2">テキストリンク</a></span></dd>
  </dl>
  </li>
  <li>
  <div class="icon"><a href="#url3"><img src="/img/gazou.jpg"></a></div><dl>
  <dt><a href="#title3">タイトルタイトルタイトルタイトルタイトルタイトル</a></dt>
  <dd>テキストテキストテキストテキストテキスト<span><a href="#link3">テキストリンク</a></span></dd>
  </dl>
  </li>
  <li>
  <div class="icon"><a href="#url4"><img src="/img/gazou.jpg"></a></div><dl>
  <dt><a href="#title4">タイトルタイトルタイトルタイトルタイトルタイトル</a></dt>
  <dd>テキストテキストテキストテキストテキスト<span><a href="#link4">テキストリンク</a></span></dd>
  </dl>
  </li>
  <li>
  <div class="icon"><a href="#url5"><img src="/img/gazou.jpg"></a></div><dl>
  <dt><a href="#title5">タイトルタイトルタイトルタイトルタイトルタイトル</a></dt>
  <dd>テキストテキストテキストテキストテキスト<span><a href="#link5">テキストリンク</a></span></dd>
  </dl>
  </li>
</ul>
  </div>

jqueryでは以下のように書きます。これでリンク発動します。簡単ですね。 これならどこの子要素でも取得できます。

 <script>
	$("#test > ul > li").on("click",function(){
			window.location = $(this).find("dt > a").attr("href");
        return false;
    });
    </script>

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

js click web css
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
macOS Mojaveで特定のアプリが動作しなくなったときの設定

今回はMacトラブルについてです。今まで使っていた人はおそらくこの設定は知っている人が多いかもしれませんが、初めてMacを使った人はこれで悩んでいる人が多いかもしれません。今回はロジクールマウス...

09 Jan 2019

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は寒波の影響でかなり寒かったですが比較的天候も良く人も多かった気がしますね。 本年は熊野大社に大晦日深夜の初詣にい...

04 Jan 2019

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/29〜1/6までお休みでございます。 1/7日から営業開始いたします。 よろしくお願いします。 ### 年末年始の営業時間 12/29-1...

29 Dec 2018

アイキャッチ
鳥取砂丘いくならおすすめの砂の美術館

先日の3連休に鳥取砂丘近くにある砂の美術館に行ってきました。この日はたまたまイベント期間中で3Dプロジェクションマッピングも見ることが出来、30分おきに上映していたので実際は10分弱ぐらいの映像...

28 Dec 2018

アイキャッチ
ワードプレスでグーグルマップを簡単に表示させるプラグイン

さて、今回は簡単に地図を設置できるプラグインのご紹介です。あまりにも有名なので説明が不要かと思いますが、簡単に説明しますと要は地図表示です。私はグーグルマップをプラグインでの表示はしたことなかっ...

19 Dec 2018

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js click web css
フッターイメージ