1

jQueryのaddClassを使用してクラスをタブに追加しているので、クリックするとクラスが変更されるため、タブが強調表示されていることがわかります。

私のHTML

<div id="mainNav">
            <ul>
                <li id="LinktheBand" onclick="nav('theBand')">The Band</li>
                <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li>

私のCSS

#mainNav li {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background:url('../images/transparent-65.png');
    height:40px;
    height: 25px !important;
    border:1px solid #000;
}

#mainNav li:hover {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

.mainNavSelected {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

私のJavascript

function nav(a) {
$('#'+a).show();
$('#Link'+a).addClass('mainNavSelected');
}

これは正しく機能します。firebugをチェックすると、class = "mainNavSelected"が追加されていることがわかりますが、list要素は新しいクラスのプロパティを取りません。Firebugは、mainNavSelectedのすべてのクラス項目をリストしますが、それらはすべて取り消し線が引かれています。この要素のクラスを置き換えるために何が欠けていますか？

4

4 に答える 4

2

それはCSSカスケードと関係があると思います。IDのスタイルは、後で指定されている場合でも、クラスのスタイルをオーバーライドします。ul li a.mainNavSelectedCSSを入れてみてください。うまくいくはずです。

また、idの大文字と小文字が2つのリンク間で矛盾していることにも注意してください。

于 2010-06-14T19:00:37.240 に答える
1

Firebugは、各CSSプロパティがどこから来ているかを示します。複数の場所からのものである場合は、有効になっていない場所に取り消し線が引かれます。

「#mainNavli」はクラス名よりも特異性が高いのではないかと思います。クラスのセレクターを「#mainNavli.mainNavSelected」に変更してみてください

于 2010-06-14T18:59:40.863 に答える
1

IDで指定されたプロパティは、クラスで指定されたプロパティよりも優先されると思います。そのため、IDで指定されたプロパティをクラスに変更してから、それを削除して新しいクラスを追加する必要があります。

于 2010-06-14T19:00:14.843 に答える
1 
.mainNavSelected { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000 !important;
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000 !important; 
}

これで問題が修正されるはずです。#mainNav liのCSSセレクターは。よりも具体的であることがわかります.mainNavSelected。このため、#mainNav li常に前にそのスタイルを表示します.mainNavSelected.

于 2010-06-14T19:10:38.787 に答える