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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

961閲覧

ページ内リンクをクリックするたび特定の要素の高さを変えたい

style_rt

総合スコア13

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2018/09/27 07:44

編集2018/09/27 07:48

前提・実現したいこと

CSSの「position:absolute」で複数のboxを重ねて非表示にし、アンカー付きのtabで表示を切り替えるプログラムを作成中です。
これについて、ページ内リンクをクリックした際にmain直下のsectionの高さを変えるJavaScriptのコードをお伺いしたいです。

発生している問題・エラーメッセージ

現状、別ページからの遷移時に高さを変えることはできたのですが、ページ内リンクをクリックした際にmain直下のsectionの高さを変えることができておりません。

該当のソースコード

HTML

1<body> 2 3<main class="test"> 4<section class="sec1"> 5 <div class="width_box"> 6 <h1>テストページ</h1> 7 8<div class="schedule"> 9 <div id="tab01"> 10 <div id="tab02"> 11 <div id="tab03"> 12 <div id="tab04"> 13 14<ul id="tab"> 15 <li><a href="#tab01">tab1</a></li> 16 <li><a href="#tab02">tab2</a></li> 17 <li><a href="#tab03">tab3</a></li> 18 <li><a href="#tab04">tab4</a></li> 19</ul> 20 21<div class="contents"> 22 <div class="tab01"> 23 <section> 24 <h2>これはtab1の中身です</h2> 25 </section> 26 </div> 27 <div class="tab02"> 28 <section> 29 <h2>これはtab2の中身です</h2> 30 </section> 31 </div> 32 <div class="tab03"> 33 <section> 34 <h2>これはtab3の中身です</h2> 35 </section> 36 </div> 37 <div class="tab04"> 38 <section> 39 <h2>これはtab4の中身です</h2> 40 </section> 41 </div> 42</div> 43 44 </div> 45 </div> 46 </div> 47 </div> 48</div> 49 50 </div> 51 </section> 52</main> 53 54</body>

CSS

1.test .sec1 { 2 height: 2215px; 3 overflow: hidden; 4} 5/* ===== schedule =====*/ 6.test .schedule { 7 margin: 20px auto; 8 background: #efefef; 9} 10.test .schedule ul#tab { 11 list-style: none; 12 margin: 0; 13 overflow: hidden; 14 padding: 0; 15 width: 100%; 16 display: flex; 17} 18.test .schedule ul#tab li { 19 font-size: 1.3rem; 20 border-bottom: none; 21 margin: 0; 22 padding: 0; 23 text-align: center; 24} 25.test .schedule ul#tab li a { 26 display: block; 27 padding: .2em 1em; 28 color: #004690; 29 padding-top: 0.8rem; 30 min-height: 50px; 31} 32.test .schedule .contents { 33 position: absolute; 34} 35.test .schedule .contents div { 36 background: #fff; 37 margin: 0; 38 padding: 0; 39 position: absolute; 40 top: 0; 41} 42.test .schedule .contents div section { 43 margin-bottom: 20px; 44 width: 1000px; 45} 46.test .schedule #tab a:hover { 47 background: #aaa; 48 color: #fff; 49 -webkit-transition: background .5s; 50 transition: background .5s; 51} 52/* ===== schedule-tab 表示切替 =====*/ 53.test .schedule .contents div { 54 z-index: 1; 55 opacity: 0; 56} 57.test .schedule #tab li:first-child a { 58 background: #004690; 59 color: #fff; 60} 61.test .schedule .contents div:first-child { 62 opacity: 1; 63 z-index: 2; 64} 65.test .schedule #tab01:target .contents .tab01, 66.test .schedule #tab02:target .contents .tab02, 67.test .schedule #tab03:target .contents .tab03, 68.test .schedule #tab04:target .contents .tab04 { 69 opacity: 1; 70 -webkit-transition: opacity .5s; 71 transition: opacity .5s; 72 z-index: 2; 73} 74.test .schedule #tab01:target .contents div:not([class="tab01"]), 75.test .schedule #tab02:target .contents div:not([class="tab02"]), 76.test .schedule #tab03:target .contents div:not([class="tab03"]), 77.test .schedule #tab04:target .contents div:not([class="tab04"]) { 78 opacity: 0; 79 -webkit-transition: opacity .5s; 80 transition: opacity .5s; 81 z-index: 1; 82 display: none; 83} 84.test .schedule #tab01:target #tab li a[href$="tab01"], 85.test .schedule #tab02:target #tab a[href$="tab02"], 86.test .schedule #tab03:target #tab a[href$="tab03"], 87.test .schedule #tab04:target #tab a[href$="tab04"] { 88 background: #004690; 89 color: #fff; 90 -webkit-transition: background .5s; 91 transition: background .5s; 92} 93.test .schedule :not([id="tab01"]):target #tab li a[href$="tab01"] { 94 background: #efefef; 95 color: #004690; 96} 97.test .schedule :not([id="tab01"]):target #tab li a[href$="tab01"]:hover { 98 background: #aaa; 99 color: #fff; 100}

JavaScript

1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2 3 // ページ外からのリンク時の処理 4 <script> 5 $(window).on('load',function(){ 6 7 // ページ内アンカーの取得 8 var anc = location.hash 9 10 // URLのハッシュ値が同値の場合に実行する内容 11 if (anc == "#tab01"){ 12 $('.sec1').css({'height':'1650px'}) 13 } else if (anc == "#tab02"){ 14 $('.sec1').css({'height':'1670px'}) 15 } else if (anc == "#tab03"){ 16 $('.sec1').css({'height':'2240px'}) 17 } else if (anc == "#tab04"){ 18 $('.sec1').css({'height':'2400px'}) 19 } 20 }); 21 </script> 22 23 // ページ内からのリンク時の処理 24 <script> 25 $('#tab01').on('click',function(){ 26 $('.sec1').css({'height':'1650px'}) 27 }); 28 29 $('#tab02').on('click',function(){ 30 $('.sec1').css({'height':'1670px'}) 31 }); 32 33 $('#tab03').on('click',function(){ 34 $('.sec1').css({'height':'2240px'}) 35 }); 36 </script>

試したこと

リンク時のクラスの付け外しで対応しようとしたり、

JavaScript

1$('a[href^="#"]').click(function(){ 2 $(this).toggleClass("clicked"); 3});

リンク時にURLをチェックしてみようとしたのですが、

JavaScript

1$('a[href^="#"]').click(function(){ 2 3 // ページ内アンカーの取得 4 var anc = location.hash 5 6 if (anc == "#tab01"){ 7 $('.sec1').css({'height':'1650px'}) 8 } 9});

組み方が悪く、うまくできませんでした。

本当に初歩的な質問だとは思うのですが、どうすれば高さが変わるようになるのか、ご教授頂ければと思います。

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

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

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

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

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

guest

回答1

0

ベストアンサー

HTML

1 <div id="tab01"> 2 <div id="tab02"> 3 <div id="tab03"> 4 <div id="tab04">

入れ子になっているため、クリックすると最終的に#tab01の処理が走ってしまっています。

:target疑似クラスを使うのであれば、まずはCSSだけでタブを作ってみてはどうでしょうか?
https://boel.jp/tips/vol86_tabselect.html

投稿2018/09/27 08:04

x_x

総合スコア13749

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

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

style_rt

2018/09/30 11:18

教えてくださり、ありがとうございます。 ご返信が遅くなり申し訳ありません。 ご提案頂いた作成方法を試してみたところ、問題なくタブを作ることができました。 もともと、別ページからそれぞれの#tab0Xのboxに直接ジャンプできないか、と考えて作っていたのですが、それよりも個別にページを作った方がいいという考えに至り、無事に納品することができました。 お待たせしてしまって申し訳ありません。このたびはすぐの回答を本当にありがとうございます! ベストアンサーにさせて頂きます。 また何かありましたら、何卒宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問