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クラスがあり、残りの2つにはDEMOクラスがあります。既存のjqueryスクリプトを変更するにはどうすればよいですか？

現在の出力：現在の出力サイト

score 3 · Accepted Answer

IDは一意である必要があります。で2つの要素を持つことはできません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クラスがあり、残りの2つにはDEMOクラスがあります。既存のjqueryスクリプトを変更するにはどうすればよいですか？

現在、これらのクラスを設定していません。次を使用します。

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

コンテンツのフェードインとフェードアウトをurJqueryコードに組み込むにはどうすればよいですか？

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

score 2 · Accepted Answer

まず、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>

そして、3つのボタンクリックすべてを処理するイベントリスナーが必要です。

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

そして、これがデモページです。

http://jsfiddle.net/JRcyd/2

score 1 · Accepted Answer

フェードアウト/フェードイン後にクラスを変更する必要があるため、次のようなことを行う必要があります

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

クリックされたボタンにアクティブクラスを追加するには、最初にすべてのボタンに共通のクラスを追加します。次に、アクティブとデモをcss（.activeではなく）でクラス（IDは一意である必要があります）に変更し#active、次にボタンをクリックすると追加できます

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

jquery - コンテンツの表示/非表示がJQuery/CSSで機能しない

3 に答える 3

Related

Reference