システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。
例えばli要素の中にdiv要素とdl要素がありそこのdt要素内にa要素が入っているけどli要素全体をリンクにしたい場合の対処方法です。
cssでやる方法は一つ上の要素を全体リンクにする方法はありましたが子要素のリンクはなかったので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∞
あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...
19 Feb 2022
今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...
12 Feb 2022
Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...
22 Jan 2022
明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...
10 Jan 2022
最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...
02 May 2021
ウェブエンジニアの須山のブログです。
WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。