0

我的网站：实时工作示例

到目前为止，我已经实现了内容的淡出和淡入。

代码：

$(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 添加“on”状态所需的样式。当您单击其他按钮时，您需要从按钮中删除该类并将其添加到当前按钮

像这样的东西

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 回答