1

我有一个切换 div，它是其中之一，我需要在 div 打开时将 div 切换为一种颜色的链接，并在单击页面上的另一个链接时返回默认颜色。这是我用来切换 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 加载，然后将“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
})
于 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 回答