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

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

ただいまの
回答率

90.51%

  • HTML

    11497questions

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

  • CSS

    7549questions

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

選択してあるタブの文字色を変えたい。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 6,726

yumi0414

score 12

クリックで表示コンテンツを切り替えられるタブのメニューを作っているのですが、クリックした後(選択してあるタブ<class="current">)の文字色を変えたいです。
hoverした時や、背景色は変えられたのですが、cssでcolorを指定してもなぜか反映されません。

あと、<class="current">のついたタブはhoverしても変わらないようにしたいのですが・・・最初はできていたのですが色を変えたり色々いじっていたらいつのまにかhoverで反応するようになってしまいました。

何が原因なのでしょうか・・・。

<div id="navigation">
    <ul>
      <li><a href="#tab1" class="current">TOP</a></li>
      <li><a href="#tab2">PHOTOS</a></li>
      <li><a href="#tab3">LINK</a></li>
      <li><a href="#tab4">ABOUT ME</a></li>
    </ul>
  </div>
#navigation {
height:40px;
background-color:#BD923D;
margin-top:5px;
text-align: center;
}

#navigation ul{
  text-align: center;
  padding: 0;
}

#navigation li {
  list-style-type: none;
  line-height: 40px;
  float: left;
  width: 245px;
  box-sizing: border-box;
  border-right: #EDDAC0 2px solid;
}

.current{
  color: #825F2B; /*  ←これが反映されない */
    background:#FDF9F7;
}

#navigation a {
  font-size: 18px;
  display: block;
  text-decoration: none;
  letter-spacing: 3px;
  color: #fff;
}

ul li a:hover{
    background:#E6D09E;
}

#navigation li:last-child {
  border: none;
}
$(function() {

     $('#contents div[id != "tab1"]').hide();
     $("a").click(function() {
     $("#contents div").hide();
     $($(this).attr("href")).show();
     $($(this).attr("href")).children("div").show();
     $(".current").removeClass("current");
     $(this).addClass("current");
     return false;
     });


 });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

CSSのセレクタには詳細度というものがあります。
詳細度に差がある場合、記述の順序に関係なく、詳細度が高いものの方が優先されてしまいます。

#navigation a{}


となっている場合、idセレクタの詳細度が高いためこちらのcolorが優先されます。

:hoverについても、今のままでは「ulの中のliの中のaが:hoverだったら」すべて色が変わってしまいます。
「currentがついていてかつ:hover」というセレクタで上書きをしてあげないといけませんね。

ul li a.current:hover{
    background:#E6D09E;
}

せっかくなので今後のために・・・

よくid=100点、class=10点、要素(タグ)=1点、みたいな説明がありますが、実際は
idの個数、classの個数、要素の個数でそれぞれカウントして、繰り上がることはありません。

もしidが2個、classが0個、要素が1個の場合は
201点のように思えますが、実は2.0.1となり、

idが1個、classが11個、要素が1個の場合は
211点ではなく1.11.1で負けるというわけです。

CSSのセレクタは記述が増えれば増えるほど混乱します。
この「セレクタの詳細度」はよく理解しておきましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/03 19:06

    解決できました!
    詳細度のことは考えていませんでした。
    ありがとうございます。

    キャンセル

0

たいていは

$("#navigation a").on("click", function() {
    $("#navigation a").removeClass("current");
    $(this).addClass("current");
});

のように 関連した項目からクラスを削除して、選択項目にクラスを追加する。
ノーテストのためタイポはごめんよ

そしてCSSはこうなる

#navigation a {
  font-size: 18px;
  display: block;
  text-decoration: none;
  letter-spacing: 3px;
  color: #fff;
}

#navigation a.current{
  color: #825F2B; /*  ←これが反映されない */
  background:#FDF9F7;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML

    11497questions

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

  • CSS

    7549questions

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