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

Feb 4, 2017

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

2017-02-04 最終更新日:2017-02-04
js web css click

システム上の設定で自動的にはき出す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∞

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

Similar Posts

最近の投稿

アイキャッチ
新しいことを続ける力を身につける方法

今回は新しく始めるきっかけや物事にどのように取り組むかを考えてみたいと思います。 結構新しいことを始めることって大変だと思います。なかなかの勇気と体力が必要かなと。 例えばダイエットとかを例...

24 Jun 2017

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

著者

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

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

タグクラウド

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