前提・実現したいこと
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を動かしています。
うえのやり方じゃなくてこうしたほうがいいよ!みたいなのがあれば教えていただけると嬉しいです!!
以上よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/24 06:16
2018/07/24 08:11
退会済みユーザー
2018/07/25 04:23