如果在其他地方单击，则将背景颜色更改回来

Posted 2023-02-21

【中文标题】如果在其他地方单击，则将背景颜色更改回来

【英文标题】：Change background color back if clicked elsewhere

【发布时间】：2014-01-31 02:38:02

【问题描述】：

我正在使用此代码加载 div 的一些内容以及更改用户单击的选项卡的颜色。一旦用户单击其他内容，我无法弄清楚如何使背景颜色变回。我该怎么做？

$(function() 
        $('#tab-1').click(function() 
            var tabcontent = "<?php echo preg_replace("/\r?\n/", "\\n", addslashes($tabcontent[0]));?>";
            document.getElementById('top-tabs-content').innerhtml = tabcontent;
            $(this).css("background-color","#F7C703");
        );
    );

【参考方案1】：

$(function() 
    $('#tab-1').click(function() 
        var tabcontent = "<?php echo preg_replace("/\r?\n/", "\\n", addslashes($tabcontent[0]));?>";
        document.getElementById('top-tabs-content').innerHTML = tabcontent;
        $('.tabclass').css("background-color","#defaultcolour");
        $(this).css("background-color","#F7C703");
    );
);

将class 添加到元素，然后在将颜色应用于clicked element 之前，将所有elements 重置为默认颜色。

【讨论】：

谢谢，这很有效，很容易集成到我现有的代码中。

啊，不过有一个障碍。这似乎扼杀了我的#tab-1:hover 造型。我尝试添加$('.toptabs:hover').css("background-color","#F7C703");，但这似乎不起作用。我怎样才能把它带回来？

好的，这很好，给你的css添加一个样式，即：.clickedTab "background-color","#F7C703" 然后，而不是使用.css()函数来添加所需的css，使用.addClass("clickedTab")和.removeClass("clickedTab")添加和删​​除链接到类的样式的函数。

【参考方案2】：

您可以将点击处理程序绑定到document 对象并使用.closest() 方法：

$(document).on('click', function(e) 
    if ( !$(e.target).closest('#tab-1').length ) 
       $('#tab-1').css("background-color", '');
    
);

http://jsfiddle.net/6g8g7/

【讨论】：

很好的答案，谢谢。我首先看到了另一个，它有效，但这种方法也可以。