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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

896閲覧

アコーディオン内の該当箇所にダイレクトリンク

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/05/09 08:19

編集2022/01/12 10:55

初めまして。
まったくわからず、助けてほしいです。
JS/JQ 初心者です。

実現したいこと

ページ内のリンクをクリックすると別ページにあるアコーディオン内の該当箇所に飛ぶようにしたい。
■仕様
1.ページ内のリンクをクリックすると別ページへ行き該当のアコーディオンが開く
2.さらに開いたアコーディオン内の該当箇所(h4)に飛びたい

該当のソースコード

クリックするリンク index.html

<ul class="box"> <li> <a href="test.html#accordion01">テキストリンクテキストリンク</a> </li> <li> <a href="test.html#accordion02">テキストリンクテキストリンク</a> </li> </ul>

クリック後、別ページにあるアコーディオン test.html

<div id="accordion01" class="linkarea">   <h3>タイトルタイトル</h3>  <div class="linkbox">  <h4>リンク1※アコーディオン内の該当箇所(リンク先をここに指定したい)</h4>  <p>内容内容内容内容内容内容</p>  <h4>リンク2※アコーディオン内の該当箇所(リンク先をここに指定したい)</h4>  <p>内容内容内容内容内容内容</p>  </div> </div> <div id="accordion02" class="linkarea">   <h3>タイトルタイトル</h3>  <div class="linkbox">  <h4>リンク3※アコーディオン内の該当箇所(リンク先をここに指定したい)</h4>  <p>内容内容内容内容内容内容</p>  </div> </div>

js

//アコーディオン $(function() {  $(".linkarea h3").on("click", function(){ $(this).next(".linkbox").slideToggle("slow"); $(this).next(".linkbox").toggleClass("active");  }); $(location.hash).children('.linkbox').slideToggle(); $(location.hash).find('.linkbox').toggleClass('active'); });

どのようにアコーディオン内の該当箇所に飛べばいいかが、まったくわかりません。。。
js/jQの詳しい方ご教授いただけると幸いです。
また、大変不慣れなため、ソースを記述していただけると幸いです。
大変お手数おかけしますが、よろしくお願いします。

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

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

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

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

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

guest

回答1

0

別ページへ行き該当のアコーディオンが開く

別ページにアコーディオンメニューがあってそれが基本閉じているということでしょうか?
リンクした場所自体は閉じてないのでしょうか?

どのようにアコーディオン内の該当箇所に飛べばいいかが、まったくわかりません

ハッシュの位置に勝手に移動しませんか?

ハッシュの中の指定位置に飛ぶ

IEだけ何故かpageshow時のscrollTopが効かないのでsetTimeoutで時間差で処理しました

  • mypage.html

HTML

1<ul class="box"> 2<li><a href="test.html?target=h4#accordion01">accordion01のh4</a></li> 3<li><a href="test.html?target=.linkbox#accordion01">accordion01の.linkbox</a></li> 4<li><a href="test.html?target=h3#accordion02">accordion02のh3</a></li> 5<li><a href="test.html?target=.linkbox%3Ep#accordion02">accordion02の.linkboxの中のp</a></li> 6</ul>
  • test.html

HTML

1<style> 2.dummy{height:999px;background-Color:gray} 3</style> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 5<script> 6$(window).on('pageshow',function(){ 7 var target=location.search.substring(1).split('&').filter(function(x){ 8 return x.split('=')[0]=="target"; 9 }).map(function(x){ 10 return decodeURIComponent(x.split('=')[1]); 11 }); 12 var t=0; 13 if(location.hash.length>0){ 14 if(target.length>0 && $(location.hash).find(target[0]).length>0){ 15 t=$(location.hash).find(target[0]).offset().top; 16 }else{ 17 t=$(location.hash).offset().top; 18 } 19 } 20 $(this).scrollTop(t); 21 setTimeout(function(){ 22 $(window).scrollTop(t).dequeue(); //IE対策 23 },50); 24}); 25</script> 26<div class="dummy"></div> 27<div id="accordion01" class="linkarea"> 28  <h3>タイトルタイトル</h3> 29  <div class="linkbox"> 30  <h4>リンク1</h4> 31  <p>内容内容内容内容内容内容</p> 32  </div> 33</div> 34<div class="dummy"></div> 35<div id="accordion02" class="linkarea"> 36  <h3>タイトルタイトル</h3> 37  <div class="linkbox"> 38  <h4>リンク2</h4> 39  <p>内容内容内容内容内容内容</p> 40  </div> 41</div> 42<div class="dummy"></div> 43<div id="accordion03" class="linkarea"> 44  <h3>タイトルタイトル</h3> 45  <div class="linkbox"> 46  <h4>リンク3</h4> 47  <p>内容内容内容内容内容内容</p> 48  </div> 49</div> 50<div class="dummy"></div> 51

投稿2019/05/09 09:36

編集2019/05/10 03:21
yambejp

総合スコア114585

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

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

退会済みユーザー

退会済みユーザー

2019/05/09 09:52 編集

>>別ページにアコーディオンメニューがあってそれが基本閉じているということでしょうか? >>リンクした場所自体は閉じてないのでしょうか? はい。別ページにあるアコーディオンメニューは基本、閉じている状態です。 リンクが該当のアコーディオンに飛んできたらアコーディオンメニューを開き、該当箇所までさらに移動してほしいです。 該当箇所はアコーディオン内のh4タグになります。 >>ハッシュの位置に勝手に移動しませんか? ハッシュはアコーディオン全体のコンテンツになっており、アコーディオンの開きのところまでしか飛んでおりません。 アコーディオン内の特定の文章までリンクさせたいしだいであります。 お手数おかけします。
yambejp

2019/05/09 10:06 編集

提示いただいているアコーディオンは閉じられるような ものになっていませんが、どのレベルで閉じればいいのでしょうか? (ネストしていないULはLIを閉じると触れなくなる) > アコーディオン内の特定の文章までリンクさせたい これは何を基準にリンク先をしていするのでしょうか?
退会済みユーザー

退会済みユーザー

2019/05/09 10:12

>これは何を基準にリンク先をしていするのでしょうか? 可能でしたら「クリックするリンク index.html」の該当リンクに指定したいです。 <a href="test.html#accordion01">テキストリンクテキストリンク</a>                ↑ ここにアコーディオンとアコーディオン内の該当箇所(h4)を指定したいです。
退会済みユーザー

退会済みユーザー

2019/05/09 10:18

わかりずらい、回答ですみません。。。 リンク元にパラメータや何かの指定をして該当箇所に移動させることは可能でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問