元々あるデモデータ(http://css-tricks.com/downloads/)に変更を加えたいです。
デモ二番目【Grid Accordion】を参考に少しいじっているのですが、なぜだか<a>~</a>のリンクが効きません。具体的には…
オリジナルは、
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
...
</dl>
こういった作り方で、<dd>の中はテキストだけが入っている状態です。
やりたい事は、この<dd>の中に、更に
<ul>
<li><a></a></li>
</ul>
を入れて変更を加えて、最終的に<a>のURLにジャンプさせたいのですが、なぜだかこの<a>のリンクが効かなくなりました。
リンクを正常に効くようにするにはどうすればいいでしょうか?
おそらくセットになっていたinfogrid.jsの一部を変えればいいと思ったのですが、ここで詰まっています。
アドバイスよろしくお願いします。
No.1ベストアンサー
- 回答日時:
ざっとしか見ていませんが…
16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみてください。
このため、他のリンクタグも(親要素がclass="curCol"でないので)一律にキャンセルされてしまっています。
キャンセルしているのは
e.preventDefault();
の行の部分ですので、それをコメントアウトすればリンクは効くようになりますが、もともとの機能が損なわれてしまいます。
両立させるのなら、(↑)の画像のリンクと他のリンク要素を識別できるようにして(画像リンクだけに共通のclassを与えるとか)、それ以外はキャンセルしないようにすればよろしいかと思います。
きちんと全部を読み取って回答しているわけではありませんので、見落としがあったらご容赦。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2023/05/23 16:28
- Excel(エクセル) Excel 数行を1組とする300組ほどあるデータの項目を揃えたいです。 3 2023/01/26 19:38
- Access(アクセス) Accessのデータ型の日付/時刻型について 1 2023/04/02 17:03
- 数学 dl と 、 Δl はどのように違いますか? 2 2022/11/30 15:48
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/01/23 09:24
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ブラウザーの戻るボタンを押し...
-
画面のどこかをクリックすると
-
Webサイト内に埋め込んだmp4動...
-
excel VBA でjava のボタンを押...
-
スマホでボタンがhoverの状態か...
-
Googleフォームの回答リンクに...
-
リロードした時にページの一番...
-
グーグルに被リンクが反映され...
-
yahooで1位。googleで圏外。助...
-
サーチコンソールで被リンクを...
-
SEOに被リンクは全く必要が...
-
個人hp 外部ページへのリンク...
-
戻るボタンの作成
-
webサイトを簡単に作成する方法...
-
「戻る」を押しても戻らないweb...
-
「全面リニューアル」の意味
-
webサイト制作、デザイン作成の...
-
静止画画像をクリックすると音...
-
ワードで一度出来てしまった余...
-
wmv埋め込みでコントロールパネ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Webサイト内に埋め込んだmp4動...
-
SEOに被リンクは全く必要が...
-
スマホでボタンがhoverの状態か...
-
個人hp 外部ページへのリンク...
-
サーチコンソールで被リンクを...
-
excel VBA でjava のボタンを押...
-
ホームページ制作で教えてくだ...
-
画面のどこかをクリックすると
-
HTMLのリンクの色をクリックす...
-
iFrame内の変数を、親フレーム...
-
Googleフォームの回答リンクに...
-
WEBページのジャンプ。素早く行...
-
jquery loadでページを読み込...
-
サイト構築の方法を教えてください
-
ブラウザーの戻るボタンを押し...
-
リロードした時にページの一番...
-
ページ内リンククリックでアコ...
-
『工事中』の素材
-
戻るボタンの作成
-
リンク先を新しいタブで開けな...
おすすめ情報