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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1090閲覧

リンクをクリックすると同じページがブラウザの別タブとして開き、 その別タブ内のアコーディオン内のアンカーリンク先まで遷移するようようにしたい。

WorkUE

総合スコア7

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/08/25 05:42

編集2020/08/25 07:37

現状の仕様ですが、

「→クリック」というリンクをクリックすると
「アコーディオン」が開き、
その中の「アンカーリンク先」まで遷移する

という作りになっているのですが、
これを、

「→クリック」というリンクをクリックすると
同じページがブラウザの別タブとして開き、
その別タブ内の「アコーディオン」が開き、
その中の「アンカーリンク先」まで遷移する

という風にしたいです。

同ページの別タブを開き、別タブ内のその後の処理をする、
というのがうまくいきません。

現状の
$('.link-open').on('click',function()
の記述に対して
window.open(this.href, '_blank');
を追記しても、ただ別タブが開くだけで、
処理自体は、元のページにされるだけになります。

少しややこしいですが、ご享受いただければと思います。。。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6 .link-open{ 7 display: block; 8 margin-bottom: 20px; 9 } 10 .ac-box{ 11 padding: 0; 12 margin: 0; 13 position: relative; 14 z-index: 1; 15 } 16 .ac-btn{ 17 background: #ccc; 18 cursor: pointer; 19 position: absolute; 20 bottom: -100px; 21 width: 100%; 22 text-align: center; 23 } 24 .ac-body .ac-inner{ 25 padding: 50px; 26 } 27</style> 28</head> 29<body> 30<div class="contents"> 31 <a href="" class="link-open">→クリック</a> 32 33 <div class="ac-box"> 34 <div class="ac-btn ac-btn-open01 -more"> 35 <p class="text">アコーディオン</p> 36 </div> 37 <div class="ac-body"> 38 <div class="ac-inner"> 39 <div id="anchor">アンカーリンク先</div> 40 </div> 41 </div> 42 </div> 43</div> 44<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 45<script src="common.js"></script> 46<script type="text/javascript"> 47 //リンクをクリックでアコーディオンが開きアンカーリンク先まで遷移する処理 48 $(function () { 49 $('.link-open').on('click',function(){ 50 $('.js-modal').fadeOut(); 51 $('.ac-btn-open01').trigger('click'); 52 var position = $('#anchor').offset().top; 53 $("html, body").animate({scrollTop:position}, 300, "swing"); 54 return false; 55 }); 56 }); 57</script> 58</body> 59</html>

javascript

1$(function(){ 2 //アコーディオン開け閉め処理 3 var acBtn = $('body').find('.ac-btn'); 4 var acArray = []; 5 for (var i = 0; i < acBtn.length; i++) { 6 acArray.push("ga_btn_" + i); 7 } 8 $(".ac-btn").each(function(i){ 9 $(this).children(".text").addClass(acArray[i]); 10 }); 11 12 $('.ac-btn').next(".ac-body").hide(); 13 $('.ac-btn').on("click",function () { 14 15 var acIndex = $('.ac-btn').index(this); 16 if ($(this).next(".ac-body").is(':hidden')) { 17 $(this).next(".ac-body").slideDown(); 18 $(this).addClass('-open'); 19 20 $(this).children(".text").removeClass(acArray[acIndex]); 21 if($(this).hasClass('-more')) { 22 $(this).children(".text").text('閉じる'); 23 } 24 } else { 25 $(this).next(".ac-body").slideUp(); 26 $(this).removeClass('-open'); 27 $(this).children(".text").addClass(acArray[acIndex]); 28 if($(this).hasClass('-more')) { 29 $(this).children(".text").text('アコーディオン'); 30 var position = $(this).parent(".ac-box").offset().top; 31 $("html, body").animate({scrollTop:position}, 300, "swing"); 32 } 33 } 34 }); 35});

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

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

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

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

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

guest

回答1

0

ベストアンサー

ページ内リンクはハッシュで指定してください。
タグを開くのはハッシュ情報をみて見せるタグを決めればいいだけだと思います

投稿2020/08/25 05:45

yambejp

総合スコア116724

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

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

WorkUE

2020/08/26 10:59 編集

すみません、当方、かなりのJS初心者でして、 ハッシュ情報というのは「location.hash」でしょうか? 見せるタグを決める、というのはどういったやり方になるでしょうか? 質問ばかりですみません。汗。。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問