jquery - 显示/隐藏内容在 JQuery/CSS 中不起作用

Question

我的 JQuery 脚本:

$(document).ready(function(){

    $('.both').click(function (event){
        $("#cl").fadeOut().removeClass("showTemp").addClass("showTempH");
        $("#nc").fadeOut().removeClass("showTemp").addClass("showTempH");
        $("#bth").fadeIn().removeClass("showTempH").addClass("showTemp");
        $(".both").removeClass("demo").addClass("active");
        $(".clinical").removeClass("active").addClass("demo");
        $(".nonclinical").removeClass("active").addClass("demo");
    });
    $('.clinical').click(function (event){
        $("#cl").fadeIn().removeClass("showTempH").addClass("showTemp");
        $("#nc").fadeOut().removeClass("showTemp").addClass("showTempH");
        $("#bth").fadeOut().removeClass("showTemp").addClass("showTempH");
        $(".both").removeClass("active").addClass("demo");
        $(".clinical").removeClass("demo").addClass("active");
        $(".nonclinical").removeClass("active").addClass("demo");
    });
    $('.nonclinical').click(function (event){
        $("#cl").fadeOut().removeClass("showTemp").addClass("showTempH");
        $("#nc").fadeIn().removeClass("showTempH").addClass("showTemp");
        $("#bth").fadeOut().removeClass("showTemp").addClass("showTempH");
        $(".both").removeClass("active").addClass("demo");
        $(".clinical").removeClass("active").addClass("demo");
        $(".nonclinical").removeClass("demo").addClass("active");
    });

});

我的 CSS 代码:

.demo {
    margin: 0px auto;
    display: block; /* Change anchor to block element */
    width: 195px; height: 37px; /* Specify width and height of the image. Height is value of each individual button graphic */
    background-image: url(theImages/inactive.png); /* Add the image as a background */
    background-position: top; /* Set the position to the top */
    text-align: center;
    vertical-align: middle;
    line-height: 37px;       /* the same as your div height */
    font-size: 13px;
    font-weight: bold;
    color: #FCFCFC;
}
.demo:hover {
    cursor: pointer;
}
.active {
    margin: 0px auto;
    display: block; /* Change anchor to block element */
    width: 195px; height: 37px; /* Specify width and height of the image. Height is value of each individual button graphic */
    background-image: url(theImages/active.png); /* Add the image as a background */
    background-position: top; /* Set the position to the top */
    text-align: center;
    vertical-align: middle;
    line-height: 37px;       /* the same as your div height */
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
}
.active:hover {
    cursor: pointer;
}
.showTemp {
    color: #1D2F9F;
    padding: 30px;
    text-align: left;
    font-size: 13px;
    font-family: Verdana, 'Source Sans Pro';
    font-weight: plain;
}
.showTempH {
    color: #1D2F9F;
    padding: 30px;
    text-align: left;
    font-size: 13px;
    font-family: Verdana, 'Source Sans Pro';
    font-weight: plain;
    display: none;
}

我的 HTML 代码:

                <table border=1 cellPadding=0 cellSpacing=0 width=100%>
                    <tr>
                        <td width=33%><div class="active both">BOTH</div></td>
                        <td width=33%><div class="demo clinical">CLINICAL</div></td>
                        <td width=33%><div class="demo nonclinical">NON-CLINICAL</div></td>
                    </tr>
                    <tr>
                        <td>
                            <ul id="bth" class=showTemp>
                                <li>Mission Statement - Interfaith Medical Center</li>
                                <li>About Employee Health Services</li>
                                <li>National Patient Safety Goals</li>
                            </ul>
                        </td>
                        <td>
                            <ul id="cl" class=showTempH>
                                <li>Pain Assessment and Management</li>
                                <li>Medication Errors</li>
                                <li>Bioethic Consultation Process</li>
                            </ul>
                        </td>
                        <td>
                            <ul id="nc" class=showTempH>
                                <li>Emergency Management</li>
                                <li>Infection Control</li>
                                <li>The Environment of Care Program</li>
                            </ul>
                        </td>
                    </tr>
                </table>

我想要做的是根据用户点击的按钮，该按钮具有 ACTIVE 类，其余两个将具有 DEMO 类。我如何修改现有的 jquery 脚本？

当前输出:Current output site

Answer 1

ID 必须是唯一的。 id="demo" 不能有两个元素。请改用类。

改变:

<tr>
    <td width=33%><div id="active" class=both>BOTH</div></td>
    <td width=33%><div id="demo" class=clinical>CLINICAL</div></td>
    <td width=33%><div id="demo" class=nonclinical>NON-CLINICAL</div></td>
</tr>

收件人:

<tr>
    <td width=33%><div class="active, both">BOTH</div></td>
    <td width=33%><div class="demo, clinical">CLINICAL</div></td>
    <td width=33%><div class="demo, nonclinical">NON-CLINICAL</div></td>
</tr>

然后将您的#demo 和#active 引用更改为.demo 和.active。

至于手头的问题:

What i am looking to do is depending on the button the user clicks, that button has the ACTIVE class and the rest two will have the DEMO class. how do i modify my existing jquery script?

你目前没有设置这些类，你会使用:

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

How would I incorporate the fade in and fade out of the contents with ur Jquery code?

您可以使用当前已有的 showTemp 和 showTempH 类:

$('.active').click(function() {
    var $current = $('.showTempH');

    $('.showTemp').fadeOut().removeClass('showTemp').addClass('showTempH');
    $current.fadeIn().removeClass('showTempH').addClass('showTemp');

    $('.active').removeClass('active').addClass('demo');
    $(this).addClass('active');
})