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

我的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>

二者都
临床的
非临床

使命宣言-宗教间医疗中心
关于雇员健康服务
国家患者安全目标


疼痛评估和管理
用药错误
生物伦理咨询过程


应急管理
感染控制
护理环境计划

我想做的是根据用户单击的按钮，该按钮有活动类，其余两个将有演示类。如何修改现有的jquery脚本

---

当前输出：

您需要在淡出/fadein之后更改类，所以您需要这样做

$("#cl").fadeOut('slow', function() {
    $(this).removeClass("showTemp").addClass("showTempH");
});

要将活动类添加到单击的按钮中，首先将公共类添加到所有按钮中，然后需要将活动和演示更改为css中的类（ID应该是唯一的）（

.active

而不是

#active

），然后在按钮中单击可以添加

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

---

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>

我如何将淡入淡出内容与Jquery代码结合起来

您可以使用当前已有的

showTemp

和

showTemp

类：

$('.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');
})

---

首先，id属性必须是唯一的。不能有多个id相同的元素

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

这是一个演示页面

---

你应该描述一下现在发生了什么，以及它是如何偏离最终结果的。网站在问题中添加了一个链接：当前脚本有什么问题？它正在做它应该做的事情，除了蓝色按钮没有改变为演示类。你这样做意味着可以在fadein和fadeout完成之前添加和删除类。通过将其更改为fire in功能，意味着在更改类之前，fadein和out将完成。我可以将其更改为fire in功能，而不是生成三个单独的代码，一个单独的代码块将处理所有三个按钮吗？这将节省文件大小的空间？谢谢你的推荐。我用所有的建议更新我的问题。我仍然希望做的一件事是提高Jquery代码的效率。谢谢，我曾想过这样做，但你给了我所需要的说服力。我已经编辑了我的答案，以包括我认为是你问题的解决方案的内容。我现在已经在我的答案中添加了一种可能的方法。请注意，我还没有测试过……谢谢你的推荐。我用所有的建议更新我的问题。我仍然希望做的一件事是提高Jquery代码的效率。我想你会工作的，你可以访问我提供的链接。它会在另外两个分区中淡出。谢谢你的推荐。我用所有的建议更新我的问题。我仍然希望做的一件事是提高Jquery代码的效率。我希望我能选择所有这些作为最佳答案。。。但这一个成功了。谢谢

$('.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');
})

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

$(".demo").live("click", function() {
       $(".active").removeClass("active").addClass("demo");
       $(this).removeClass("demo").addClass("active");
 });