他のDIVがクリックされたときにDIVの色を変更してください

Question

http://jsfiddle.net/C8B8g/7/ 2つのボタン（= 2div）「リージョン」と「ソース」があります。各divは、マウスオーバーで強調表示されます（青い背景）（stackoverflowの貢献者のおかげで、私はまだJSで非常に悪いです）。

私はユーザーが実際にボタンであることを認識していないことに気がつきました。私がしたいのは、最初のDIVに「私たちの地域」というテキストが含まれ、青い背景で強調表示され、 "our source"というテキストを含む他のdivがクリックされたとき（この場合、 "ソース"の背景が青色に変わります）、白の背景に戻ります。

Answer 1

はこれを試してみてください... "現在の" CSSではなく、成功せずに使用していくつかのテストをした： 更新： 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

[OK]を私が取り組んでいたことです。

まず、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; 
} 

Aワーキング例：

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

を現在のHTML場合、私はわからないんだけどマークアップには他の目的もいくつかありますが、現在のスタイルと機能性<a href="#" data-region="source-region">Our region</a>を<div>と<span>にラップする必要はありません。ここで例えば

はちょうどアンカータグで、同じコードです：http://jsfiddle.net/dmvcQ/7/

は、あなたが答えについて質問があるなら、私に教えてください。

Answer 5

それとも、それを主にjqueryの

実施例を行うことができます。これは、改善された答えをdownvotedされている理由

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; 

});