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。

至于手头的问题：

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

您目前没有设置这些类，您可以使用：

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

如何使用您的Jquery代码合并淡入和淡出内容？

您可以使用当前的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');
})

Answer 2

首先，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>

你需要一个能够处理所有三个按钮的事件监听器，点击，

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

这是一个演示页面。

http://jsfiddle.net/JRcyd/2

Answer 3

你需要在淡出/淡化之后更改类，这样你就需要做这样的事情

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

要将活动类添加到单击的按钮，首先在所有按钮中添加一个公共类，然后您需要在css中将active和demo更改为类（ID应该是唯一的）（{{1} }而不是.active），然后在按钮单击中添加

#active

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

3 个答案: