質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

5532閲覧

div全体をリンクにしたときに一部を除外したい

yamazamaki

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3グッド

3クリップ

投稿2020/04/10 15:13

編集2020/04/10 15:23

下記の図のようにカード全体のリンクをJavaScriptでexample.com/post/1にした場合に一部を除外したい場合はどのようにしたらいいのでしょうか。
<div class="text">の部分のリンクを無効)

HTML

1<div class="post-card"> 2<a herf="example.com/user/user_id"> 3 <div claas="user"> 4 <img src="user-icon.png" class="user-icon"> 5 <p class="username">ユーザーネーム</p> 6 <p class="user_id">@User_id</p> 7 </div> 8</a> 9 <a href="example.com/post/1" class="link"></a> 10 <div class="text"> 11 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 12 </div> 13</div>

JavaScrip

1 2$('.post-card').click(function() { 3location.href = $(this).find('.link').attr('href'); 4});

イメージ説明

iio, kimaiio, GenbuHase👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

CSSのみでも実現できます。

css

1.post-card { 2 position: relative; 3} 4.post-card .link { 5/*リンクを .post-card 全体に拡張*/ 6 position: absolute; 7 top: 0; 8 width: 100%; 9 height: 100%; 10} 11.post-card a:first-child { 12/*ユーザーリンクを前面へ*/ 13 display: block; 14 width: 200px; 15 height: 100px; 16 position: relative; 17 z-index: 1; 18} 19.text{ 20 /*テキストを前面へ*/ 21 position: relative; 22 z-index: 1; 23}

Codepenサンプル

投稿2020/04/10 16:39

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

クリックしたターゲットにtextクラスがついているかの条件分岐をページ遷移の処理前に入れるとできます。

投稿2020/04/10 15:53

hayato7

総合スコア1135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hayato7

2020/04/10 15:54

すでに詳細な回答がありました、すみません。
guest

0

ベストアンサー

e.targetでクリックされた要素を直接とって処理を分岐すればよいです。

【jQueryでwebサイト上でクリックした箇所を判別し操作する方法 | スターフィールド株式会社】
https://sterfield.co.jp/designer/jqueryでwebサイト上でクリックした箇所を判別し操作す/

【event.curretTargetとevent.targetの違い - gsol-dev's blog】
http://gsol.hatenablog.com/entry/2013/12/04/event.curretTargetとevent.targetの違い

投稿2020/04/10 15:46

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問