0

私のウェブサイト: Live Working Example

ここまでコンテンツのフェードアウトとフェードインを実現してきました。

コード：

$(document).ready(function(){

    $('.clinical').click(function (event){
        $("#cl").fadeIn();
        $("#nc").fadeOut();
        $("#bth").fadeOut();
    });
    $('.nonclinical').click(function (event){
        $("#cl").fadeOut();
        $("#nc").fadeIn();
        $("#bth").fadeOut();
    });
    $('.both').click(function (event){
        $("#cl").fadeOut();
        $("#nc").fadeOut();
        $("#bth").fadeIn();
    });

});

誰かが支援できる場合は、次のことについて支援が必要です。

  1. デフォルトではクリニカルテキストが表示されるので、クリニカルボタンを押した状態にして他のボタンと区別したい。

#1 の CSS コード:

#demo {
    margin: 0px auto;
    display: block; /* Change anchor to block element */
    width: 275px; height: 47px; /* Specify width and height of the image. Height is value of each individual button graphic */
    background-image: url(testBtn.png); /* Add the image as a background */
    background-position: top; /* Set the position to the top */
    text-align: center;
    vertical-align: middle;
    line-height: 47px;       /* the same as your div height */
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    color: #5E5E5E;
}
    #demo:hover {
        background-position: center; /* Set the position to the center */
    }
    #demo:active {
        background-position: bottom; /* Set the position to the bottom */
        color: #ffffff;
    }

    #nc {
        display: none;
    }
    #bth {
        display: none;
    }

  1. ユーザーがどのボタンをクリックしても、コンテンツがフェードインし (機能している)、ボタンが押された状態になります。

  2. IE でフェードイン/フェードアウトが非常に不安定です。修正できますか?

  3. コードを最適化してコードを少なくしますか?

4

1 に答える 1

1

ボタンをクリックすると、クラスを追加したり、toggleClass を使用したり、css を使用して「オン」状態に必要なスタイルを追加したりできます。別のボタンをクリックすると、ボタンからクラスを削除し、現在のボタンに追加する必要があります

このようなもの

http://jsfiddle.net/jue6t/2/

    $('.button').on('click', function() {
        if(!$(this).hasClass('on')) {
            $('.button').removeClass('on');
            $(this).addClass('on');
        }
    });

コードはもっと整理できますが、アイデアはわかります

あなたも使用することができます

$('.button.on').removeClass('on');

全体的な ID がある場合は、それを追加するのが賢明です。

$('#myID .button.on').removeClass('on');
于 2013-03-12T20:52:15.443 に答える