1

多くのトグル div があり、div が開いているときに div を 1 つの色に切り替え、ページ上の別のリンクがクリックされたときにデフォルトの色に戻るリンクが必要です。これがdivを切り替えるために使用しているコードで、完璧に機能します! 通常の css コードを追加すると、別のリンクがクリックされたときに、リンクが訪問済みリンクとして色付けされたままになります。

function showonlyone(thechosenone) {
    $('.newboxes').each(function (index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).show(200);
        } else {
            $(this).hide(600);
        }
    });
}

このコードブロックに追加して、選択時に色を別の色に設定し、別のリンクが選択されたときにデフォルトの色に戻すにはどうすればよいですか...ありがとう!

4

2 に答える 2

2

.addClass()（私の意見では）最も簡単な方法は、 andを使用してクラスを適用または削除すること.removeClass()です。次に、CSS を使用して色やその他の設定をフォーマットできます。

function showonlyone(thechosenone) {
    $('.newboxes').each(function (index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).addClass("highlight");
        } else {
            $(this).removeClass("highlight");
        }
    });
}

そして後であなたのCSSで：

.highlight a { /* may need to format differently depending on your HTML structure */
    color: #ff0000; /* red */
}

次のようにコードを単純化することもできます。

function showonlyone(thechosenone) {
    $('.newboxes.highlight').removeClass("highlight"); // Remove highlight class from all `.newboxes`.
    $('#' + thechosenone ).addClass("highlight"); // Add class to just the chosen one
}

このコードは、DOM が読み込まれるのを待ってから、「ハイライト」クラスを の最初の出現に適用します<div class="newboxes">。

$(document).ready( function(){
    $(".newboxes:first").addClass("highlight"); 
    // The :first selector finds just the first object
    // This would also work: $(".newboxes").eq(0).addClass("highlight"); 
    // And so would this: $(".newboxes:eq(0)").addClass("highlight");
    // eq(n) selects the n'th matching occurrence, beginning from zero
})
于 2013-04-29T20:32:47.783 に答える
1 
function showonlyone(thechosenone) {
    $('.newboxes').hide(600).css('color', 'blue').find('#' + thechosenone).show(200).css('color', 'red');
}

前提条件: このクラス「newboxes」には、関数で指定された「thechosenone」で示される要素が含まれています。

CSS クラスベースのバージョン: 

function showonlyone(thechosenone) {
    $('.newboxes').hide(600).removeClass('linkHilightColor').find('#' + thechosenone).show(200).addClass('linkHilightColor');
}
于 2013-04-29T20:35:13.653 に答える