-1

我的 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 脚本？

电流输出：电流输出部位

4

3 回答 3

3

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>

然后将您的#demoand#active引用更改为.demoand .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');
})
于 2013-03-13T16:49:05.740 回答
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

于 2013-03-13T17:01:16.830 回答
1

你需要在淡出/淡入之后更改类，所以你需要做这样的事情

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

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

$('.commonButtonClass').removeClass('active').addClass('demo');
$(this).addClass('active').removeClass('demo');
于 2013-03-13T16:43:14.387 回答