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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

348閲覧

クラスが無い時にjQueryで表示させているバーを非表示にしたい

kamoka

総合スコア5

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/12/20 05:14

前提・実現したいこと

jQuery初心者です。

グローバルメニューについて、現在のページにバー(下線)をつけ、尚且つ追従させ、
グローバルメニューに無いページではバー事態非表示にさせたいです。

「現在のページに.currentをつけるjQuery」と、「メニューにバーを追随させるjQuery」は
サイトで見つけたjQueryをコピペして少しいじって、うまくいっています。

ここからが問題なのですが、.currentが無い時(グローバルメニュー以外のページを開いてる場合.currentが無い状態)に、バーは非表示にしたいのですが、どこをどのように書けば良いですか?

よろしくお願いします。

発生している問題

.currentがつかないページではアンダーバーが左寄せで表示されてしまっている。→消したい

該当のソースコード

HTML

1 2 <nav class="nav"> 3 <div id="g-nav"> 4 <a href="index.html">HOME</a> 5 <a href="access.html">アクセス</a> 6 <a href="location.html">周辺環境</a> 7 <a href="plan.html">プラン</a> 8 <a href="facility.html">設備</a> 9 <a href="outline.html">物件概要</a> 10 <span></span> 11 </div> 12 </nav>

CSS

1#g-nav{ 2 position: relative; 3 padding-right: 20px; 4 padding-top: 20px; 5} 6#g-nav a{ 7 padding:10px; 8 text-decoration: none; 9 color: #0C0B08; 10} 11#g-nav span { 12 background: #D3CAC1; 13 height:3px; 14 display:block; 15 position:absolute; 16 width:50px; 17 left:0; 18}

jquery

1<script> 2$(function(){ 3 $('#g-nav a').each(function(){ 4 var $href = $(this).attr('href'); 5 if(location.href.match($href)) { 6 $(this).addClass('current'); 7 } else { 8 $(this).removeClass('current'); 9 } 10 }); 11}); 12 13$(function() { 14 $('#g-nav span').css({ 15 width: $('#g-nav .current').outerWidth(), 16 left: $('#g-nav .current').position().left 17 }); 18 $('#g-nav a').mouseover(function(){ 19 $('#g-nav span').stop().animate({ 20 width: $(this).outerWidth(), 21 left: $(this).position().left} 22 ,{ duration: 170, easing: 'linear', }); 23 }); 24}); 25</script>

試したこと

考えたのは、#g-nav aに.currentが無かったら#g-nav spanを消せば良いのかな?
と思って、調べて下記のコードをjqueryのscriptの中に続けて書いてみましたが違ったようです・・・(そもそもjavascriptやjqueryの文法などが分からないため見当違いなことをしていたらすみません)

if ($("#g-nav a").not("current")) {
$('#g-nav span').hide();
}

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

kamoka

2019/12/20 05:34

回答ありがとうございます。すみません。。。 判定する記事はいくつか見たのですが、 よく分からず。。。 下記の書き方で合っていますでしょうか? また、「ここは何を書けば良いでしょうか?」の部分は何を書けば良いのでしょうか? $('#g-nav a').on('click', function () { if ($(this).hasClass('current')) { ここは何を書けば良いでしょうか? } else { $('#g-nav span').hide(); } });
azuapricot

2019/12/20 05:38

持ってないときだけにしたいなら ! をつけて否定にすれば elseの処理はいらないです
azuapricot

2019/12/20 05:39

「「ここは何を書けば良いでしょうか?」の部分は何を書けば良いのでしょうか?」 何を書けばいいのでしょうか?と言われても詳しい仕様はわからないので回答は以下のようにしかできません ・currentクラスがついている時に行いたい処理を書く
kamoka

2019/12/20 06:10

なかなか解決せずすみません・・・ .on('click', function ということはボタンを押した時の処理ですよね? URLに最初にアクセスしている時には何のボタンも押していないので、いきなりifから書いて文法的に大丈夫でしょうか?(教えていただいた「!」否定つけてみました。) if (!$(this).hasClass('current')) { $('#g-nav span').hide(); } もし文法があっていたのであれば、これでも現状動いておらず、他の部分の可能性もあるかもしれないですね・・・
azuapricot

2019/12/20 06:17 編集

初期画面表示の時にその処理を動かしたいのであれば、ifから書いて問題ありません。 $(function(){   // 画面描画時にcurrentクラスを持っていなければ hide()する   if (!$(this).hasClass('current')) {     $('#g-nav span').hide();   } }); 「.on('click', function ということはボタンを押した時の処理ですよね?」 この onclickは一体どこのことを言っているのでしょうか・・・?
shinji709

2019/12/20 06:35

質問者さんに確認したいのですが、既存のコードのままで、グローバルメニューにあるページ以外のとき、 left: $('#g-nav .current').position().left あたりで Cannot read property 'left' of undefined" などのエラーがブラウザのコンソールに出ていないでしょうか? もし出ている場合はエラーメッセージを追記で貼り付けておいてくれませんか
kamoka

2019/12/20 07:04

azuapricotさん 具体的なコードありがとうございます! 消すことはできました!ありがとうございます。 ですが・・・また別の問題に気づいてしまいました;; 初期画面やcurrentクラスのないページだとバーが追従していませんでした>< 一先ず質問していた事に関しては解決いたしましたので、ありがとうございました! ちなみに。。。onclickは、最初に送っていただいたURLの内容で応用しようとした時に疑問に思った事でした。紛らわしくてすみません。
kamoka

2019/12/20 07:10

shinji709さん ほんとですね。。。何か出てます。 エラーはこんな感じで書いてあります。 バツのところ following-bar.js:24 Uncaught TypeError: Cannot read property 'left' of undefined at HTMLDocument.<anonymous> (following-bar.js:24) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2) ビックリマークのところ A cookie associated with a cross-site resource at http://eloqua.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
shinji709

2019/12/20 07:28

ありがとうございます。コメント欄は見ない方もいるので、質問本文のほうにも編集で追記しておいていただけると助かります。回答の前提なので。
guest

回答1

0

ベストアンサー

まずエラー部分を修正します。グローバルメニューにあるページ以外のとき==.currentがないとき、ここでエラーが発生しそれ以降の処理が動きません。バーが追随しないのはそのためです。

JavaScript

1 // $('#g-nav span').css({ 2 // width: $('#g-nav .current').outerWidth(), 3 // left: $('#g-nav .current').position().left 4 // }); 5 $('#g-nav .current').each(function() { 6 $('#g-nav span').css({ 7 width: $(this).outerWidth(), 8 left: $(this).position().left 9 }); 10 }); 11

そしてメインの質問に対する回答ですが、leftの初期値をビューポートの遥か左に設定しておくのが簡単だと思います。

CSS

1#g-nav span { 2 background: #D3CAC1; 3 height:3pxa; 4 display: block; 5 position:absolute; 6 width:50px; 7 /* left:0; */ 8 left:-10000px; 9}

投稿2019/12/20 07:25

shinji709

総合スコア805

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

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

kamoka

2019/12/21 00:57

分かりやすい説明ありがとうございます! ”leftの初期値をビューポートの遥か左に設定しておくのが簡単” なるほど。その手がありましたね!ありがとうございます! javascriptに関して、挿入してみたのですが、エラーは消えましたがアンダーバーも消えてしましました><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問