Question

我有一个切换div是众多之一，我需要在div打开时将div切换为一种颜色的链接，并在单击页面上的另一个链接时返回默认颜色。这是我用来切换div的代码，它完美无缺！当我添加常规css代码时，链接会在点击另一个链接时保持彩色状态作为访问链接。

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

如何添加到此代码块以在选择时将颜色设置为不同颜色，并在选择其他链接时将其更改回默认颜色...谢谢！

Answer 1

最简单的（在我看来）方法是使用.addClass()和.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，然后将“highlight”类应用于<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
})

Answer 2

function showonlyone(thechosenone) {
    $('.newboxes').hide(600).css('color', 'blue').find('#' + thechosenone).show(200).css('color', 'red');
}

假设：这个类＆＃34; newboxes＆＃34;包含由＆＃34; thechosenone＆＃34;表示的元素。在函数中命名。

基于CSS类的版本：

function showonlyone(thechosenone) {
    $('.newboxes').hide(600).removeClass('linkHilightColor').find('#' + thechosenone).show(200).addClass('linkHilightColor');
}

JQuery show hide div链接

2 个答案: