1

私はjQueryにかなり慣れていないので、次の問題が私には見えない非常に些細なことによって引き起こされているのかどうかは本当にわかりません。いずれにせよ、私は長く懸命に答えを探しましたが、何も見つかりませんでした。あなたが私を助けてくれることを願っています！

スライド式のコンテンツを補完する、シンプルなタブ付きメニューをコーディングしようとしています。タブにホバーするとフェードインする背景があり、クリックしたタブに応じてアクティブなクラスが削除および追加されるようにしたかったのです。

jQueryカラープラグインを使用したフェード効果のコードは次のとおりです。

$('#menu a').not('.active').hover(function(){
        $(this).stop().animate({backgroundColor: '#FCEA77', 'opacity': '0.3'}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', 'opacity': '1'}, 'slow');
});

アクティブクラスのコードは次のとおりです。

$('a').click(function () {  
$(".active").removeClass("active");  
$(this).addClass("active");
});

どちらもそれ自体で正常に機能しますが、同時に機能させようとすると、フェード効果が発生し、別のタブをクリックするとアクティブなクラスが現在のクラスから削除されますが、クリックされたタブは取得されません。アクティブクラス。これを引き起こす原因は何ですか？それが本当に簡単で明白なことであるならば、私は謝罪します。

ああ、これが私のCSSです：

#menu { padding: 10px 0 0 0;
    height: 25px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    position:relative;
}

#menu a{
    color:white;
    padding: 10px;
    text-decoration: none;
}

#menu a.active {
    color:black;
    background:#FCEA77;
}

と私のHTML：

       <div id="menu">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#info">Info</a>
        <a href="#team">Team</a>
        <a href="#gallery">Gallery</a>
        </div>

よろしくお願いします！

4

4 に答える 4

1

これはあなたが望んでいたものですか？

私が見た問題.animateは、スタイルをタグに直接追加していたことで、通常の CSS ルールに従ってクラス<a href>のスタイルをオーバーライドしていました。.active

!important最も簡単な解決策は、activeクラス スタイルに追加することでした。

#menu a.active {
    color: black !important;
    background: #FCEA77 !important;
}​
于 2012-06-15T15:21:26.047 に答える
0

私は今問題を見ます。不透明度には引用符はまったく必要ありませんが、他の CSS ルールには引用符が必要です。つまり、次のとおりです。

$('#menu a').not('.active').hover(function(){
    $(this).stop().animate({backgroundColor: '#FCEA77', opacity: 0.3}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', opacity: 1}, 'slow');
});
于 2012-06-15T15:16:01.270 に答える
0
  1. アニメーションのプロパティからすべての一重引用符を削除します
  2. の代わりに.on('mouseenter', ...)andを使用します。それ以外の場合は、ドキュメントの準備ができているときにアクティブでない要素のみがターゲットになります.on('mouseleave', ...).hover(...)
  3. コールバックに a$(this).trigger('mouseleave');を入れるclick

例はこちら

于 2012-06-15T15:23:04.510 に答える
0

これを試して 

    $('#menu a').hover(function(){
       if(!$(this).hasClass('active')) {
            $(this).stop().animate({'backgroundColor': '#FCEA77', 'opacity': '0.3'}, 'slow');
            }, function() {
              $(this).stop().animate({'backgroundColor': '#000000', 'color':'#ffffff', 'opacity':     '1'}, 'slow');
        }
     }

この例もデモで確認できます

于 2012-06-15T15:06:40.230 に答える