更改突出显示的颜色

时间:2011-11-15 16:47:52

标签: javascript jquery

当我移动到另一个标签时,我遇到了更改颜色的问题。正如您在此处看到的那样:http://lordmonarch.net84.net/当您按下联系人中的任何选项卡时,它会改变颜色,但当您移动到另一个选项卡时,它不会改变其颜色。这是我的代码:

$('.contfield').click(function(){
            if ($('.contclickedinfo').is(':hidden')) {
                $('.contclickedinfo').show();
                $(this).css("background-color","rgb(23,55,94)");
                $(this).css("color","#FFF");    
            }
            else{
                $('.contclickedinfo').hide();
                $(this).css("background-color","rgb(217,217,217)");
                $(this).css("color","#383838");
            }
            return false;
        });

        $('.contclickedinfo').click(function(e) {
            e.stopPropagation();
        });
        $(document).click(function() {
            $('.contclickedinfo').hide();
            $(this).css("background-color","rgb(217,217,217)");
            $(this).css("color","#383838");
        }); 

和html:

<div class="contacts">
            <div class="conthead">
                Contacts
            </div>
            <div class="confields">
                <div class="contfield">
                    Jim Granger - CEO
                </div>
                <div class="contfield">
                    Frank Grant - CFO
                </div>
                <div class="contfield">
                    Dolly Marsden – SVP BD
                </div>
                <div class="contfield">
                    Angus Lewis – SVP Marketing
                </div>
            </div>
            <div class="contclickedinfo">
                <div class="contbox">
                    <table border="0">
                         <tr>
                         <td>Phone</td>
                         <td><div class="contrightfield">+82 9999 9999</div></td>
                         </tr>
                         <tr>
                         <td>Email</td>
                         <td><div class="contrightfield">jim.granger@abccmo.com</div></td>
                         </tr>
                         <tr>
                         <td>Address</td>
                         <td><div class="contrightfield">12 First Road,
                            Kowloon,
                            Hong Kong
                            X123 Y456</div>
                         </td>
                         </tr>
                         </table>
                </div>
            </div>
        </div>

1 个答案:

答案 0 :(得分:1)

    if ($('.contclickedinfo').is(':hidden')) {
        $('.contfield').css("background-color","rgb(217,217,217)");
        $('.contfield').css("color","#383838");
        $('.contclickedinfo').show();
        $(this).css("background-color","rgb(23,55,94)");
        $(this).css("color","#FFF");    
    }