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

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

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

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

JavaScript

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

HTML

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

Q&A

2回答

24595閲覧

クリックをした後に、activeのclassを付与するjavascriptが上手く機能しません。(コンソール上にもエラーがでていなく困ってます)

qaz3330

総合スコア113

HTML5

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2016/08/14 16:04

編集2022/01/12 10:55

次のようなナビゲーションバーにおいて、クリックをした後に、activeのclassを付与するjavascriptを実装したかったのですが、上手くいかず質問させて頂きました。

こういう記事なども拝読して対応しているのですが、どうも上手くいかず。
http://stackoverflow.com/questions/22518099/bootstrap-menu-change-li-active-class-on-click

該当箇所

<ul class="sidebar-menu"> <li> <a href="/users">ユーザー一覧</a> </li> </ul>

javascriptコンソールでセレクタからの取得はできております。

$('.sidebar-menu li')
=> [<li>...</li>]

該当javascript

$(function(){ $('.sidebar-menu li').on('click', function() { $(".nav-list li").removeClass("active"); //$(this).addClass("active"); this.className = "active"; }); });

↑では、 $(this) や this、 addClass や className などの組み合わせで複数パターン検証しましたが、ダメでした。

読み込みの順番に問題があるのかと思いまして、
・$(document).ready
・window.load

なども試しました。

しかしダメです。

javascriptコンソールでブレークポイントを止めた際

this
=> <li>...</li>

確かにthisは取得できております。

ブレークポイントでとめた上でthis.className = "active";
とすると上手くいくのですが、どうも、通常の場合ですと上手くいきません。

ブラウザのリロードは勿論しております。

また、alert; や console.log; などできちんと該当のjavascriptの箇所を通っていることも確認しております。

コンソール上にもエラー文がでているわけでもありません。

他に思いつく解決策がわからずとても困っております。

何卒宜しくお願いします。

今回やりたいこととのイメージ図

googleの検索結果等にありますようなこういうやつです。

.navbar-nav>li.active>a{ background-color: #367FAA; }

イメージ説明

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

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

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

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

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

guest

回答2

0

それ以外がどうなっているのか、「通常の場合」というのがわかりません。
CSSもないので何をもってうまくいってないと判断されているのかもわからないですが、

javascript

1$(this).addClass("active");

でうまくいっています。(liにclass="active"は付与されます。)

ただし、アンカータグが別ページを指定している、そのままではページが変わっている可能性があります。
(なにかフレームワークを利用しているのでもない限り)

スタイルを無効にして、li の 点 の部分( aタグのリンクでない部分 )をクリックしてみてください。

または、

<a href="/users" onclick="return false;">ユーザー一覧</a>

として確認してみてください。

投稿2016/08/14 16:29

flied_onion

総合スコア2604

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

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

qaz3330

2016/08/14 16:34

ご回答ありがとうございます。 return false をいれますと、activeになっていることを確認できました。 > アンカータグが別ページを指定している、そのままではページが変わっている可能性があります。 このことをふまえて、↑に原因があるということでしょうか? 勉強不足のものでして、上記内容の意図が理解しきれておりません。
qaz3330

2016/08/14 16:36

アンカータグは今回で言いますと、ユーザー一覧ページに遷移します。 ページのリロードがはしってしまうことが問題なのでしょうか?
flied_onion

2016/08/14 16:43

そうです。移動先が同じページであっても、ページが移動すればそれまでの状態は捨てられます(HTMLは基本的にステートレスですので、ページが移動すればページはゼロから書き直されます)。 移動先のページでactiveを設定してあげるようにしてください。 情報を引き継ぐ必要があれば何らかの方法で引き渡すか、保存・復元を行うしかありません。
qaz3330

2016/08/14 17:07

ありがとうございます。質問本文に完了後のイメージ図と該当のcssを追記しました。もっと簡単にできるのかと思いましたが、情報を引き継いだりしなくてはいけないのですね!! 大変、勉強になりました。 こういうケースではcookieの仕組みなどを使ったりするのはどうでしょうか? DBに保存というのは少々違うのかなと思いました。。。
flied_onion

2016/08/14 23:18

サイトのバックグラウンドがわかりませんのでケースも上げにくいですね。 htmlだけの静的なページであれば、 user/ のhtmlに そのcssを設定しておけばいいように思います。 Webアプリケーションなら、ページを生成するときにURLなどから判断してCSSを生成するなどしてあげてください。 最近のブラウザがターゲットであれば、cookie以外にlocalstrageを使うこともできますが、何れにしてもページの遷移にそれらを使うのは過剰かなと思います。
guest

0

JavaScript

1 $('.sidebar-menu li').on('click', function() { 2// $(".nav-list li").removeClass("active"); 3 $(".sidebar-menu li").removeClass("active"); // ← こうでは?

投稿2016/08/14 16:18

kei344

総合スコア69364

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

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

qaz3330

2016/08/14 16:21

ご回答ありがとうございます。 今回やりたいこととしましては、Classを付与することでして、removeClassはまた違うのかなと思いました。 removeClassのコードが原因で動作しないのかと思い、現状のコードからremoveClassを外しましたがダメでした。
kei344

2016/08/14 17:13

回答は、とりあえず間違いなので指摘しました。 追記で書かれているようなGoogle検索でのナビゲーションバーは、ページ移動を伴いません。そのページ内の要素を書き換えています。qaz3330さんが書かれているコードでは a要素を使っているために、何も対策をしなければページ移動が起こります。 1. ページ移動した後、そのページに該当するメニューに「.active」を付加したい 2. ページ移動をせずに、メニューに「.active」を付加したい どちらでしょうか? また、2の場合はそのメニューで何をしたいか(タブを開くとかページの一部を書き換えるとか)を質問文に追記してみてください。
qaz3330

2016/08/14 17:31

状況をきちんと説明できておらずすみません。 1. ページ移動した後、そのページに該当するメニューに「.active」を付加したい に該当します。
kei344

2016/08/14 17:42 編集

その場合、通常HTML側のbody要素などにページ情報をクラスとして追加しておいて、それで表示を変えることが普通だと思います。(特定のページからの遷移のみに.activeを付加するなら別ですが) 動くサンプル: https://jsfiddle.net/wpr4pvzh/
qaz3330

2016/08/14 18:26

サンプルのページを拝見しました。 jsfiddleというページの使い方に慣れていないためか再現できないのと、同じコードをローカルにもってきても同様に再現できませんでした。 また、javascriptのコードはなかったのですが、 今回の実装はjsなしでできるという意味でしょうか? せっかく実装していただいたのに申し訳ありませんが、上手く再現できませんでした。。。
kei344

2016/08/14 18:38

説明無しだったのでわかりにくいですね。すいません。 結果画面(右下のフィールド)の「ユーザー一覧」に背景色が付いていませんか? それは、<body class="list"> として .list .sidebar-menu>li.list>a としているから付いています。 Aページ <body class="list">(略)</body> Bページ <body class="action">(略)</body> 上記のようにして、「どこのページか」をクラスで持てば、どのメニューがアクティブかをjsを使わなくてもCSSで処理できますよね。 > 今回の実装はjsなしでできるという意味でしょうか? 書かれている情報から推察するに、js無しで実装出来ると思います。 また、ページ移動を行うのだから、そもそも移動先のページの「<li><a href="/users">ユーザー一覧</a></li>」が「<li class="active"><a href="/users">ユーザー一覧</a></li>」であれば良いのでは?ということです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問