-1

このように、2 つのタブがあるので、1 つをクリックするとアクティブになります。現在、アクティブなタブと非アクティブなタブを区別しようとしていますが、.css プロパティではありませんが、次のように、クリックしたタブに特定のクラスを追加したいです。

$(".tab1").addClass('active');

でも、ダメ。外部CSSファイルを使用していることにも注意してください。

<div id="menuitem" class="tab1"></div>
<div id="menuitem" class="tab2"></div>

.active {
    width: 170px;
    height: 70px;
    float: right;
    background-color: red;
}

#menuitem {
    width: 170px;
    height: 70px;
    float: right;
    background-color: white;
}
4

4 に答える 4

2

HTML の 2 つの div に同じ ID を使用することはできません。このように HTML を変更してみてください。

<div id="menuitem1" class="menuitem tab1"></div>
<div id="menuitem2" class="menuitem tab2"></div>

.active {
background-color: red;
}

.menuitem {
width: 170px;
height: 70px;
float: right;
background-color: white;
}
于 2013-02-07T22:23:14.140 に答える
2

もう 1 つの問題は、div 要素が存在する前に jQuery 関数を実行していることです。

したがって、コードを移動します

$(".tab1").addClass('active');

変更するdivの下に配置するか、ドキュメント対応関数でラップします。

$(document).ready(function(){
    $(".tab1").addClass('active');
});

コードを実行する前に、dom が作成されるまで待機します。

于 2013-02-07T22:30:47.913 に答える
1

まず第一に、id異なる要素で同じを使用しないidでください。 は一意である必要があり、これを試してください:

jQuery:

$('.menuitem').click(function() {
    $('.menuitem').removeClass('active');
    //removes active class from all menu items

    $(this).addClass('active');
    //adds active class to clicked one
});

html:

<div id="tab1" class="menuitem"></div>
<div id="tab2" class="menuitem"></div>

css:アクティブなクラスに同じプロパティを定義する必要はありません。違いを定義するだけです:

.active { background-color: red; }

.menuitem {
  width: 170px;
  height: 70px;
  float: right;
  background-color: white;
}
于 2013-02-07T22:23:50.047 に答える
1

まず、ids は常に一意である必要があります。

ただし、問題の原因はcssの特異性です。ルールは、idクラス ルールよりも具体的です。代わりにこれを試してください。

#menuitem.active {
width: 170px;
height: 70px;
float: right;
background-color: red;
}

#menuitem {
width: 170px;
height: 70px;
float: right;
background-color: white;
}

ただし、これは特異性の問題を克服するために機能することに注意してください。重複した を取り除く必要があるという事実には対処していませんid。

CSS の特異性

于 2013-02-07T22:25:22.657 に答える