Question

我正在使用此代码加载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");
        });
    });

Answer 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。

Answer 2

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

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

http://jsfiddle.net/6g8g7/

如果在其他位置单击，则更改背景颜色

2 个答案: