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

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

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

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

JavaScript

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

CSS

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

Q&A

解決済

1回答

256閲覧

タブ移動で、次のタブをクリックするまで背景色をキープしたい

konoha0708

総合スコア36

HTML5

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

JavaScript

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

CSS

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

0グッド

0クリップ

投稿2019/01/24 06:52

編集2019/01/24 07:00

タブ移動で背景色を残したい

上記のリンク先の例で、カテゴリ(タブ)メニューのマウス移動で、次のタブをクリックするまで背景色を保持したいのですが、マウスが移動すると背景色が消えてしまいます。

タブの移動で、次のタブをクリックするまで背景色を保持するにはどのようにすればよいのでしょうか。

html

1 2<script type="text/javascript"> 3//<![CDATA[ 4$(function() { 5 $("#tab-t li").click(function() { 6 var num = $("#tab li").index(this); 7 $(".content_wrap").addClass('disnon'); 8 $(".content_wrap").eq(num).removeClass('disnon'); 9 $("#tab li").removeClass('select'); 10 $(this).addClass('select') 11 }); 12}); 13//]]> 14</script> 15<ul class="tab-1" id="tab-t"> 16 <li class="hvr-sweep-to-top kaisen-1 select"><a href="#tab1"><?php echo get_cat_name(192); ?></a></li> 17 <li class="hvr-sweep-to-top kaisen-2"><a href="#tab2"><?php echo get_cat_name(193); ?></a></li> 18 <li class="hvr-sweep-to-top kaisen-3"><a href="#tab3"><?php echo get_cat_name(194); ?></a></li> 19 <li class="hvr-sweep-to-top kaisen-4"><a href="#tab4"><?php echo get_cat_name(195); ?></a></li> 20 <li class="hvr-sweep-to-top kaisen-5"><a href="#tab5"><?php echo get_cat_name(196); ?></a></li> 21 <li class="hvr-sweep-to-top kaisen-6"><a href="#tab6"><?php echo get_cat_name(197); ?></a></li> 22</ul> 23<div class="tab_content"> 24 <div class="tab_area content_wrap" id="tab1"> 25 <ul class="tab-item-set"> 26 <?php cat_post_list( 10, 192 ); ?> 27 </ul> 28 <div class="top-img-f-r"> 29 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 192 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> 30 </a> 31 </div> 32 </div> 33 <div class="tab_area content_wrap disnon" id="tab2"> 34 <ul class="tab-item-set"> 35 <?php cat_post_list( 10, 193 ); ?> 36 </ul> 37 <div class="top-img-f-r"> 38 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 193 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 39 </div> 40 </div> 41 <div class="tab_area content_wrap disnon" id="tab3"> 42 <ul class="tab-item-set"> 43 <?php cat_post_list( 10, 194 ); ?> 44 </ul> 45 <div class="top-img-f-r"> 46 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 194 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 47 </div> 48 </div> 49 <div class="tab_area content_wrap disnon" id="tab4"> 50 <ul class="tab-item-set"> 51 <?php cat_post_list( 10, 195 ); ?> 52 </ul> 53 <div class="top-img-f-r"> 54 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 195 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 55 </div> 56 </div> 57 <div class="tab_area content_wrap disnon" id="tab5"> 58 <ul class="tab-item-set"> 59 <?php cat_post_list( 10, 196 ); ?> 60 </ul> 61 <div class="top-img-f-r"> 62 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 196 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 63 </div> 64 </div> 65 <div class="tab_area content_wrap disnon" id="tab6"> 66 <ul class="tab-item-set"> 67 <?php cat_post_list( 10, 197 ); ?> 68 </ul> 69 <div class="top-img-f-r"> 70 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 197 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 71 </div> 72 </div> 73</div> 74

css

1a:link, a:visited { 2 color: black; 3 text-decoration: none; 4} 5.tab-1 li a:visited{ 6 color: blue; 7} 8.tab-item-set li a:hover { 9 color: #114783; 10} 11.tab-1 li.kaisen-1:hover{ 12background:#004ea2 !important; 13} 14.tab-1 li.kaisen-2:hover{ 15background:#ff5600 !important; 16} 17.tab-1 li.kaisen-3:hover{ 18background:#4788ee !important; 19} 20.tab-1 li.kaisen-4:hover{ 21background:#c03 !important; 22} 23.tab-1 li.kaisen-5:hover{ 24background:#ff1c9a !important; 25} 26.tab-1 li.kaisen-6:hover{ 27background:#04B404 !important; 28} 29@media (max-width: 768px) 30.tab-1 li { 31 width: 16% !important; 32} 33.select{ 34background:yellow; 35} 36.disnon { 37 display: none; 38}

参考にしたurl

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

.activeでも.selectでもいいですがクラスがあったら……と書けばいいのでは

CSS

1.tab-1 li.kaisen-1.active { 2 background: #004ea2!important; 3} 4 5.tab-1 li.kaisen-2.active { 6 background: #ff5600!important; 7} 8/* 以下同様 */

投稿2019/01/24 07:02

x_x

総合スコア13749

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

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

konoha0708

2019/01/26 08:47

お返事ありがとうございます。 デベロッパーツールを表示しながらだと理想通りの動きになるのですが、通常表示でクリックすると、背景色がなぜか外れてしまいます。 なにか邪魔しているのでしょうか?
konoha0708

2019/01/28 04:08

すみません。上記、私の勘違いでした。 大変失礼しました。 きちんとできました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問