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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

828閲覧

項目が開いた状態でのリンク設定

toshishi1224

総合スコア9

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2017/11/13 05:25

編集2017/11/13 05:29

はじめまして。

知識が足りず、教えて頂きたいのですが、
以下の例のような
dt dd を使い作成した説明文のリストを、別ページからリンクした時に、
指定のものだけ内容が開いている(タブが開いている)状態にしたいと思います。
例)

html

1<dt id="tab1" class="accordion">ご注文について</dt> 2 <dd class="accordion"> 3 <h3>ご注文の流れ</h3> 4 <p>1)商品を選択してショッピングカートに入れます。<br><br>

下記のようにjqueryを記述して進めようとしていましたが、
遷移先の項目が開かれません。
もし分かる方がいらっしゃればご教示いただければ幸いです。

javascript

1<script> 2<script> 3 $('.accordion + dd').hide(); 4 $('.accordion dt').click(function(){ 5 $(this).next('+ dd').slideToggle(); 6 $(this).next('+ dd').siblings('+ dd').slideUp(); 7 }); 8</script>

よろしくお願い致します。

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

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

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

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

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

m.ts10806

2017/11/13 05:27

プログラムコードは```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
guest

回答2

0

ベストアンサー

URLにハッシュなどのパラメータを与え、
遷移先でそれを取得し、該当の要素にopenなどのクラスを与えます。
後はopenクラスが付与されている要素以外を.hide()すれば良いでしょう。

HTML

1<dt id="tab1" class="accordion">ご注文について</dt> 2 <dd class="target">

JavaScript

1$(function(){ 2 var hash = location.hash; 3 $('#'+hash).next('.target').addClass('open'); 4 $('.target:not(.open)').hide(); 5 $('.accordion').on('click', function(){ 6 $(this).next('.target').slideToggle(); 7 }); 8});

トリガーとなる要素と、内容の要素に同じクラス名を与えているのもあまりよろしくないので改善した方が良いと思います。


動作サンプル
https://jsfiddle.net/g3rq5159/

投稿2017/11/13 05:50

編集2017/11/13 06:44
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

toshishi1224

2017/11/13 06:33

aozuki様 ご教示頂きありがとうございます。 上記について、遷移元のURLには#tab1などで設定しているのですが、 うまくopenが効いてくれず、私の方で足りない情報などがあるのかと思うのですが。。 >トリガーとなる要素と、内容の要素に同じクラス名を与えている というのは、前述のdd dtのことでしたでしょうか?
退会済みユーザー

退会済みユーザー

2017/11/13 06:50

とりあえず動作サンプルを回答に追記しましたので動かしながら色々いじってみてください
toshishi1224

2017/11/13 07:15

aozuki様 ご丁寧にどうもありがとうございます。 とても助かりました!こちらを参考に、調整してみます。
guest

0

遷移先の項目が開かれません。

遷移先に開く項目のなんらかのパラメータを渡していますか?

  • location.search
  • location.hash
  • クッキー
  • その他(LocalStrageなど)

などで渡して、それを先方のjavascriptが認識してくれるなら
特定の項目を開いた状態にできると思います

投稿2017/11/13 05:36

yambejp

総合スコア114585

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

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

toshishi1224

2017/11/13 05:47

yambe.jp様 ご回答頂きありがとうございます。 初めに、以下のような方法で渡していたのですが、 上手くいかず躓いておりました。 教えて頂いたlocation.hashなど、うまく組み込んでみます。 //ダイレクトリンク $(function() { //location.hashで#以下を取得 変数hashに格納 var hash = location.hash; //hashの中に#tab~が存在するか調べる。 hash = (hash.match(/^#tab\d+$/) || [])[0]; //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3)     if($(hash).length){ var tabname = hash.slice(1) ; } else{     // 要素が存在しなければtabnameにtab1を代入する     var tabname = "tab1";} //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 $('ul.tab_area li').eq(tabno).addClass('select') });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問