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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

2回答

4159閲覧

タブ項目の背景色を変えたい。

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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クリップ

投稿2018/07/24 04:06

前提・実現したいこと

Wordpress初心者で勉強中のものです。
タブで切り替えて対応した項目の画像を表示するようなページを
http://pilgrim-guild.com/tabmenu-without-plugin/
上記のサイトを参考に作っています。
サイトのようにマウスオーバーで色が変わりactiveになっているものも色が違うようにしたいのですが、できません。

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

背景色の設定が反映されない。
下記CSSコードのcontentの中に記述すれば変わるが全部が同じ色になってしまう。
borderなどの他のものは反映される。

該当のソースコード

HTML

1<ul class="tab"> 2 <li>7日前</li> 3 <li>6日前</li> 4 <li>5日前</li> 5 <li>4日前</li> 6 <li>3日前</li> 7 <li>2日前</li> 8 <li>1日前</li> 9 <li class="active"> 今日</li> 10</ul> 11 12<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 13<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 14<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 15<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 16<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 17<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 18<div class="tabContent"><img src="********" alt="" width="771" height="290"/></div> 19<div class="tabContent active"><img src="********" alt="" width="771" height="290"/></div>

CSS

1* { 2 margin: 0; 3 padding: 0; 4} 5 6.tab { 7 list-style: none; 8} 9 10.tab li { 11 display: inline-block; 12 color: #999; 13 background-color: #ddd; 14 padding: 10px 20px; 15 cursor: pointer; 16} 17 18.tab li:hover { 19 color: #f00; 20 background-color: #999; 21} 22 23.tab li.active { 24 color: #fff; 25 background-color: #999; 26} 27 28.tabContent { 29 display: none; 30 width: 780px; 31 padding: 20px; 32 border: 3px solid #999; 33} 34 35.active { 36 display: block; 37}

JavaScript

1$(function() { 2 $(".tab li").click(function() { //タブをクリックしたときのファンクションをまとめて指定 3 var num = $(".tab li").index(this); //.index()を使いクリックされたタブが何番目かを調べ、numという変数に代入 4 5 $(".tabContent").removeClass('active'); //コンテンツを一度すべて非表示 6 7 $(".tabContent").eq(num).addClass('active'); //クリックされたタブと同じ順番のコンテンツを.activeをクラスに追加して表示 8 9 $(".tab li").removeClass('active'); //一度タブについているクラス.activeを消して 10 11 $(this).addClass('active') //クリックされたタブのみにクラス.activeをつける 12 13 }); 14}); 15

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

XAMPPを使ってローカル環境でWordpressを動かしています。

うえのやり方じゃなくてこうしたほうがいいよ!みたいなのがあれば教えていただけると嬉しいです!!
以上よろしくお願いします。

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

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

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

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

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

guest

回答2

0

出来ていると思うのですが

CodePenで確認する

投稿2018/07/24 04:45

Atsushi_Okumura

総合スコア355

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

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

退会済みユーザー

退会済みユーザー

2018/07/24 06:16

ほんとですね... でも、LocalでしているからなのかCSSの背景色だけ反映されないんです... JavaScriptで背景色指定したらなるんですけど... 回答ありがとうございました!!!
Atsushi_Okumura

2018/07/24 08:11

liに他のスタイルがあたってしまっているかもしれませんね
退会済みユーザー

退会済みユーザー

2018/07/25 04:23

なるほど。ありがとうございます。 いろいろ探ってみます!!
guest

0

ベストアンサー

なぜか実際の環境に移しても反映されず...
JavaScriptからCSSの設定を変えて強引にしました。

投稿2018/07/30 05:54

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問