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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1917閲覧

Javascriptを使ったタグの切り替えの簡略化

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/17 15:11

編集2019/02/18 11:10

閲覧ありがとうございます。
ただ今、Javascript(Jqueryは使いません)を使ってタグの切り替え、クリックで色の変更のコードを書いています。
一旦の実装はできたのですが、かなり冗長なコードになっており、どうにか簡単にできないものかと試行錯誤しています。
for文を使うとは思うのですが、どうやって一つをクリックしたらそれ以外を非表示にする*タブを一つにまとめればいいのかわかりません。

Javascript

1var tabs = document.getElementsByClassName('tab'); 2var pages = document.getElementsByClassName('tab_content'); 3 4window.onload = setTab; 5 6function setTab(){ 7 for(var i=0; i<tabs.length; i++){ 8 tabs[i].onclick = changeTab; 9 } 10} 11 12function changeTab(){ 13 var targetid = this.div.substring(this.div.indexOf('#')+1,this.div.length); 14 for(var i=0; i<pages.length; i++){ 15 if(pages[I].id !=targetid){ 16 pages[i].style.display="block"; 17 }else{ 18 pages[i].style.display="none"; 19 } 20 }return false; 21}

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

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

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

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

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

kei344

2019/02/17 15:16

HTMLも質問文に追記してください。
退会済みユーザー

退会済みユーザー

2019/02/17 15:24

追加いたしました。
guest

回答1

0

ベストアンサー

https://teratail.com/questions/history-questions/174925
編集前の質問への回答です。


このリンクの方のJava部分を参考にしたのですが、どうしてもvar targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);
この部分でエラーが出ます。

↑ 提示されたHTML中にhrefを持つa要素がないからでは。

タブのスタイルを全てJavaScriptで設定していますが、そこはCSSで作成してJavaScriptはクラスの付け外しのみを担当させたほうが保守性があがると思います。

投稿2019/02/17 15:32

編集2019/02/18 01:59
kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2019/02/17 15:37

すみません、実はCSSで作成してあるのですが、どう参照するのかわからずそのままJavascriptの方で記述してあります...
kei344

2019/02/17 15:40

試したコードは質問文に追記されては? 「ヒントでも助かります」と書きつつ「あれもやった」「これもやった」と返されても・・・。
退会済みユーザー

退会済みユーザー

2019/02/18 01:19

追記いたしました。
退会済みユーザー

退会済みユーザー

2019/02/18 01:51

kei344さんのいう通りで間違いないようです、それぞれに同一のdivで括ったタグを持たせ、 var targetid = this.div.substring(this.div.indexOf('#')+1,this.div.length); こちらに修正したのですが、Uncaught TypeError: Cannot read property 'substring' of undefined at HTMLUListElement.changeTabのエラーを吐きます。
kei344

2019/02/18 01:54

this.divという参照方法はそもそも使えません。入門書でも買って勉強されるのが早いと思います。
退会済みユーザー

退会済みユーザー

2019/02/18 01:57

おっしゃる通りなのですが、どうしても今必要な内容でして、技術不足なのは重々承知しております、ご不快な思いをさせたなら申し訳ございません。
kei344

2019/02/18 11:56

何がどう解決して、私の回答がなぜベストアンサーになるのでしょう。
退会済みユーザー

退会済みユーザー

2019/02/18 12:09

間違えた質問で先に勧めて、別の質問を立てるために回答くれた人にBAだそうだ?
退会済みユーザー

退会済みユーザー

2019/02/18 12:13

実際kei344様のご指摘は正しいのでBAには間違っていないと思うのですが... あの形では実装不可能でしたので...
kei344

2019/02/18 12:26

あ、退会した。「タグの切り替え」等で検索されてこのページにたどり着いた人へ、 https://teratail.com/questions/175079 こっちに hai_haiさんの書いたコードがあるので参考にしてみてください。
退会済みユーザー

退会済みユーザー

2019/02/18 12:34

> あちらも放置はしたくないのですが、質問自体が的外れなものだったので、解決済にしておきます。 と向こうで言ってる時点で本人も無理やり解決済みにしたと認識してるとおもうんだけどな
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問