- ベストアンサー
元々あるデモデータ（http://css-tricks.com/dow
元々あるデモデータ（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の一部を変えればいいと思ったのですが、ここで詰まっています。 アドバイスよろしくお願いします。
- carsea802
- お礼率25% (4/16)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- アコーディオンメニューの開閉制御
私webデザイナーをしています。 アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか？ 【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。
- 締切済み
- JavaScript
- ジャンプ先を開く方法
こんにちは、 折りたたみ機能を使っている <dt id="top">トップ</dt>に 別ページから http://localhost/asel/#top で飛んできた場合、自動的に開くようにしたいのですが、 どのようにすればよいのでしょうか？ html------------------- <dl class="accordion"> <dt id="top">トップ</dt> <dd> <h4>カテゴリ１</h4> <ul> <li>攻略編</li> </ul> </dd> </dl> 折りたたみコード-------------------- $(function(){ $('dl.accordion>dd').hide(); $('dl.accordion>dt.opened').nextUntil('dl.accordion>dt').show('slow'); $('dl.accordion>dt').click(function(e) { $(this).toggleClass('opened'); $(this).nextUntil('dl.accordion>dt').toggle('slow'); }); });
- 締切済み
- HTML
- HTML dlについて
HTML初心者です。 下記をdlタグで定義したいんですがどういう方法がいいんでしょうか？ 入れ子にして作ったんですがどうも長ったらしいのでもっと完結にしたいんですが・・・・ うまく全部を関連付ける方法を教えて下さい。 <dl> <dt><ul> <li>１と２と３の題名</li></dt> <dd> <li> <dl> <dt>題名１</dt></li> <li><dd>内容１</dd></li> <li><dt>題名２</dt></li> <li><dd>内容２</dd></li> <li><dt>題名３</dt></li> <li><dd>内容３</dd></dl></li> </dl> </ul> </dd> </dl>
- ベストアンサー
- HTML
- cssを用いる表の作り方
いつもいつもお世話になっております。 cssを用いた表の作り方で迷っています。 dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>てすと</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> </style> </head> <body> <dl id="sample3"> <dt>施設名</dt> <dd>あああああああああああああああ</dd> <dt>所在地</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいい</dd> <dt>職員体制</dt> <dd>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</dd> <dt>アクセス</dt> <dd> <ul> <li>・えええええええええええええええええええええええええ</li> <li>・おおおおおおおおおおおおおおおおおおおおおおおおお</li> <li>・かかかかかかかかかかかかかかかかかかかかかかかかか</li> </ul> </dd> <dt>総居室数</dt> <dd>３室</dd> <dt>居室面積</dt> <dd>２０平米</dd> <dt>電話番号</dt> <dd>12-3456-7890</dd> <dt>FAX番号</dt> <dd>12-3456-7890</dd> </dl> </body> </html> dl#sample3 { width: 600px; } dl#sample3 dt{ border-top: 1px solid #fff; float: left; width: 6em; padding: 10px; background-color: orange; } dl#sample3 dd{ border-left: 1px solid #fff; border-top: 1px solid #fff; margin-left: 115px; padding: 10px; background-color: silver; } ul { list-style-type: none; margin: 0 auto; padding: 0; } 各セルに色をつけたいのですが、説明が２行以上に渡ると項目名が対応されないのと、 "電話番号""FAX番号"のような説明が短いセルは幅を短くして、横に並べることが出来ないところで悩んでいます。 もちろん、それらのセルを別classにすれば対応可能ではありますが、テンプレートとして使用する必要があるため、汎用性の高い構成にする必要があるのです。 ご存知の方、どうぞどうぞご教示お願いいたします。
- ベストアンサー
- CSS
- ul、dlタグでリストを作成すると行間に余白が
とても基本的な質問なのですが、どなたか教えて頂けると助かります。 ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。 この余白を消したいのですが、どうすれば宜しいでしょうか？ ■htmlの記述 <ul> <li>画像１</li> <li>画像２</li> <li>画像３</li> </ul> <dl> <dt>画像1-1</dt> <dd>画像1-2</dd> <dt>画像2-1</dt> <dd>画像2-2</dd> <dt>画像3-1</dt> <dd>画像3-2</dd> </dl> ■CSSの記述 #ul{ margin:0; padding:0; line-height:0; list-style:none; } #ul li{ margin:0; padding:0; line-height:0; } #dl{ margin:0; padding:0; line-height:0; list-style:none; } アドバイスをどうぞ宜しくお願いします。
- 締切済み
- Mac
- リンク紹介に使える要素は？
例:Google 1.ulを使う場合 <ul> <li><a href="http://www.google.co.jp/">Google</a></li> <p>検索できます</p> <ul> 2.dlを使う場合 <dl> <dt><a href="http://www.google.co.jp/">Google</a></dt> <dd>検索できます</dd> </dl> どちらが正しいのでしょうか、どちらも正しくないのでしょうか？ またXHTMLとHTML 4.01で違いはあるでしょうか ご教授よろしくお願いします
- ベストアンサー
- HTML
- <li>の画像およびテキストリンクのランダム複数表示
javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>～～</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。
- 締切済み
- JavaScript
- liタグの中に<p>タグやら<dl>を入れるのはあり？
それともなしでしょうか？ たとえば、作品実績みたいなのを羅列するとき 「画像」 「タイトル」 「簡単な説明」 を乗せたいときはどうしますか？ <ul> <li> <p>画像</p> <dl> <dt>タイトル</dt> <dd>説明</dd> </dl> </li> </ul> こんな感じを考えたのですが・・・ <li>（作品）ごとにボーダーボトムで区切りたいかなと考えております。 <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか？ </ul>
- ベストアンサー
- HTML
- 定義リストタグの正しい使い方
定義リストタグ(dl,dt,dd)の正しい使い方が分かりません。 これらのタグを用いてサイドバーを記述しても正しいのでしょうか？ 例えば、 <dl class="sidebar"> <dt>最近のエントリ</dt> <dd> <ul class="entry"> <li>エントリ1</li> <li>エントリ2</li> </ul> </dd> </dt> </dl> この記述は構造的には間違っていないと思うのですが、HTMLの意味的に正しいでしょうか？関係があるのか分かりませんが、バージョンはXHTML 1.0 Strictを考えています。
- ベストアンサー
- HTML
- Jqueryでのアコーディオン について
Jqueryでのアコーディオンのリンク について教えていただければ幸いです。 下記のアコーディオンを メニュー1をクリックするとリンク先に飛び さらに、アコーディオンが開くようにしたくて下記のアコーディオンを 作りましたが、 そのように、機能しませんでした。 全ての<a> タグにリンクを設定してみました。 ですが、 「サブメニュー」のリンクは機能するのですが 「メニュー1」等のリンクは機能しませんでした。 具体的には、リンク先に飛ばないまま、 アコーデイォンが開いてしまいます。 どうすれば、サンプル.html (dtタグ部分)をクリックするとリンク先に飛び さらに、アコーディオンが開くようになるのでしょうか？ もし、ご存じの方がいましたら力を貸していただければ幸いです。 よろしくお願いします。 $(function() { $('#accordion dd').hide(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); }); <dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html</a> <a href="#">サブメニュー1-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー2-1.html</a> <a href="#">サブメニュー2-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl>
- 締切済み
- JavaScript
お礼
ご回答いただきありがとうございます。 無事解決いたしました。