單擊其他DIV時更改DIV顏色

Question

您可以在jsfiddle上看到http://jsfiddle.net/C8B8g/7/我有2個按鈕（= 2個div）「區域」和「源」。每個div在鼠標上被突出顯示（藍色背景）（感謝stackoverflow貢獻者導致我仍然非常糟糕的JS）。

我注意到用戶實際上並沒有意識到這些是按鈕，所以我想要做的是讓第一個包含文本「我們的區域」的DIV在默認情況下用藍色背景突出顯示當包含文字「我們的來源」的其他div被點擊時（在這種情況下，「我們的來源」背景變成藍色），回到白色背景。做了一些測試在CSS，但沒有成功， 「當前」 用...

Answer 1

試試這個： 更新時間： Here is working jsFiddle.

$('.activity-title a:first').css({'background-color':'#f00','color':'#fff'}); 
//for setting first button highlighted by default, 
//don't forgot to define document.ready before this 

$('.activity-title a').click(function() { 
    var region = $(this).attr('data-region'); 

    $('.activity-title a').css({'background-color':'#fff','color':'#467FD9'}); 
    $(this).css({'background-color':'#f00','color':'#fff'}); 

    $('.textzone:visible').stop().fadeOut(500, function() { 
    //don't forgot to add stop() for preventing repeat click conflict 
     $('#' + region).fadeIn(500); 
    }); 

    return false; 

});​ 

Answer 2

try with this exemple: 
<div id="target"> 
Test1 
</div> 
<div id="other"> 
    Test2 
</div> 

<script> 
$("#target").click(function() { 
    $('#target').css({'background':'blue'}); 
$('#other').css({'background':'white'}); 
}); 

$("#other").click(function() { 
    $('#other').css({'background':'blue'}); 
    $('#target').css({'background':'white'}); 
}); 
</script> 

Answer 3

添加樣式選擇DIV

.source-selected { 
    background-color:#00F; 
} 

添加這個類到你的默認div。

添加此行到您的單擊處理程序（更新）

if(!$(this).closest('.source-title-box').hasClass('source-selected')) 
{ 
    $('.source-title-box').toggleClass('source-selected'); 
} 

嘗試更新小提琴：

http://jsfiddle.net/dmvcQ/1

Answer 4

好吧，我決定發佈一個答案，因爲有你的代碼的某些部分我想要解決。

首先，不要在最後做一個return false;，而可以使用jQuery event.preventDefault();函數。最終的結果基本上是相同的，但是通過這種方式，我們可以使用jQuery在開始運行其他代碼之前告訴錨點不做任何事情。

我更新的Javascript代碼：

$('.source-title-box a').click(function(event) { 

    // Stop the default anchor behaviour 
    event.preventDefault(); 

    // Lets check if the clicked link is already active 
    // And if it is active, don't let them click it! 
    if($(this).closest('div').hasClass('active')) { 
     return false; 
    } 

    // Now lets remove any active classes that exist 
    $('.active').toggleClass('active'); 

    // And apply an active class to the clicked buttons 
    // parent div 
    $(this).closest('div').toggleClass('active'); 

    var region = $(this).attr('data-region'); 

    $('.textzone:visible').fadeOut(500, function() { 
     $('#' + region).fadeIn(500); 
    }); 
});​ 

我添加的CSS：

.active { 
    background-color:#467FD9; 
    color:#fff; 

} 
.active a { 
    cursor:default; /* Don't show the hand cursor */ 
    color:#fff; 
} 

工作示例：

http://jsfiddle.net/dmvcQ/3/

我不知道如果當前的HTML標記有其他目的，但目前的風格和功能ty只需要<a href="#" data-region="source-region">Our region</a>即可實現，您無需將它們包裝在<div>和<span>中。

例如，下面是相同的代碼，只用錨標籤：http://jsfiddle.net/dmvcQ/7/

讓我知道如果您對回答任何問題。

Answer 5

或者你也可以做到這一點，主要的jQuery

工作的示例：

http://jsfiddle.net/razmig/GhbjS/

$('.activity-title a:first').css({ 
    "background-color": "#467FD9", 
    "color": "#fff" 
}); 


$('.activity-title a').mouseover(function() { 
    $('.activity-title a').css({ 
     "background-color": "#fff", 
     "color": "#467FD9" 
    }); 
    $(this).css({ 
     "background-color": "#467FD9", 
     "color": "#fff" 
    }); 

}); 

$('.activity-title a').click(function() { 
    var region = $(this).attr('data-region'); 

    $('.textzone:visible').fadeOut(2000, function() { 
     $('#' + region).fadeIn(2000); 
    }); 

    return false; 

});